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

Question

когда вы нажимаете на пустое место в Google Calender для добавления события или когда вы нажимаете на уже размещенное событие, вы получите очень хорошее всплывающее окно с информацией о событии (см. Прикрепленное изображение).

Как я могу создать похожие всплывающие окна, используя CSS и Javascript (я предпочитаю jQuery). Я также использую Bootstrap, если это поможет.

Обратите внимание, что позиция всплывающего окна зависит от того, где я нажму, поэтому предположим, что у меня есть HTML-таблица, и в зависимости от того, какой щелчок я нажму, всплывающее окно будет сгенерировано рядом с этой позицией и будет указывать на эту конкретную область.

Также обратите внимание на поведение закрытия (кнопка закрытия, и если я щелкну во всплывающем окне, она закроется).

Если будет более одного хорошего ответа, я приму самый простой, который работает с jQuery (и jQuery UI) и Bootstrap - я был бы признателен, если бы не использовались другие фреймворки.

Спасибо!

Answer 1

Существует плагин jquery tip-tip, который может делать то, что вам нужно. По сути, вы хотите отобразить некоторый HTML-код над областью, которую вы щелкнули. Подсказка может отображать html в виде «пузыря» над точкой, которую вы щелкнули. Это также легко в стиле. Он в основном используется для всплывающих подсказок, но я не вижу причин, по которым его нельзя адаптировать для этого.

http://code.drewwilson.com/entry/tiptip-jquery-plugin

(p.s. Вам нужно использовать свойство 'content' для установки содержимого)

"content: string (false by default) - HTML or String to use as the content for TipTip. 
Will overwrite content from any HTML attribute."

Answer 2

Я предполагаю, что вы говорите о ссылке tooltips, которая поможет вам

http://jquerytools.org/demos/tooltip/index.html

http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

http://craigsworks.com/projects/qtip/

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 3

Возможно, этого не было еще в марте, когда задавался этот вопрос, но в текущей версии Bootstrap есть всплывающие окна, подобные той, о которой идет речь.См .:

http://twitter.github.com/bootstrap/javascript.html#popovers

Answer 4

Другие ответы содержали ссылки на всплывающие подсказки. Однако я считаю, что такой компонент диалога, как диалоговое окно jQuery UI , лучше соответствует вашим требованиям.

Answer 5

Вы можете использовать FireBug для анализа страницы и проверки фактических значений для свойств CSS (т. Е. Какого цвета граница или какой отступ).