2012-03-23 3 views
2

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

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

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

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

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

Спасибо!

Google calendar popup

+1

Что вы пытаетесь? Stackoverflow здесь не для того, чтобы делать вашу работу за вас, мы можем вам помочь, если вы застряли с чем-то конкретным. – JaredMcAteer

+0

Я считаю, что мой вопрос достаточно конкретный! Я хочу создавать всплывающие окна? Как я могу сделать это, как google? – Serafeim

ответ

1

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

+0

Я на самом деле закончил тем, что использовал именно это, спасибо! – Serafeim

0

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

4

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

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

(п.с. вы должны использовать свойство «контента», чтобы установить содержание)

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

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

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

+0

Bootstrap rulz!Мне нравятся новые возможности :) – Serafeim

Смежные вопросы