Как создать всплывающее окно, подобное этому в Google maps, используя JQuery или JQuery?

Question

Когда вы используете Карты Google, вы нажимаете маркер на карте, затем появляется окно. Вы даже можете ввести свой номер мобильного телефона и получать смс от Google. Как сгенерировать это всплывающее окно с помощью JQuery или JQuery?

Answer 1

Я предполагаю, что Google Maps является просто примером эффекта, который вы хотите, а не ваш проект базы:

Это действительно ничего больше, чем показывает конкретный DIV, а затем скрыть это.

$("a.popup1").click(function(e){ 
    e.preventDefault(); 
    $("div.popup1").toggle(); 
}); 

-

<a class="popup1" href="enable-javascript.html">Show Popup</a> 
<div class="popup1"><p>This is where your data goes.</p></div> 

-

Если Карты Google на самом деле ваш проект базы, я хотел бы предложить проверить jMaps, а JQuery плагин Google Maps. Примеры добавления маркеров и pointHTML (эти окна вы говорите), можно найти здесь: http://github.com/digit...Google.Markers.AddMarker.html

Answer 2

Есть всевозможные вариации, но в основном то, что вы будете делать это:

1. начать, добавить «div» к документу (или к некоторому элементу контейнера, в зависимости от того, как выглядит ваш сайт)
2. выполнить транзакцию AJAX для получения содержимого для вашего небольшого всплывающего окна (если его там нет на скрытой странице)
3. дать div подходящий CSS u хотите, чтобы атрибуты класса стирали его так, как вы хотите (важно, чтобы сделать это v isable :-)

Среди вещей, которые должен быть в вашем всплывающем окне, является кнопка или какой-либо другой элемент управления, позволяющий удалить его. Вы можете использовать функцию jQuery offset(), чтобы найти позицию страницы того, на что было нажата, а затем информацию о местоположении (верхний левый угол) можно использовать для размещения вашего плавающего элемента. Ваш плавающий элемент, вероятно, должен располагаться с абсолютным позиционированием и иметь значение «z-index», которое больше, чем окружающий контент.

Точно, как вы это делаете, многое зависит от того, как выглядит ваш сайт, как устроен и позиционируется другой контент, и как вы получаете/синтезируете содержимое всплывающих окон.