如何创建一个Google日历使用的弹出窗口？

当您点击Google Calender中的空白区域以添加事件或单击已安置的活动时，您将获得一个非常漂亮的弹出窗口，其中包含关于该事件的信息（请参阅附加图像）。如何创建一个Google日历使用的弹出窗口？

如何使用CSS和Javascript创建类似的弹出式窗口（我更喜欢jQuery）。如果有帮助，我也使用Bootstrap。

请注意，弹出窗口的位置取决于我将点击的位置，所以假设我有一个html表格，并且取决于我将点击哪个弹出窗口将会在这个位置附近生成，并且将指向特定的位置。

另请注意关闭行为（关闭按钮，如果我点击弹出它将关闭）。

如果有不止一个好的答案，我会接受最简单的与jQuery（和jQuery UI）和Bootstrap一起工作 - 如果不使用其他框架，我会很感激。

谢谢！

Google calendar popup

2012-03-23 Serafeim

你试过了什么？ Stackoverflow不在这里为你做你的工作，我们可以帮助你，如果你坚持一些特定的东西。 – JaredMcAteer 2012-03-23 17:21:30

我相信我的问题已经够具体了！我想创建弹出窗口？我怎样才能做到这一点像谷歌？ – Serafeim 2012-03-23 18:30:04

其他的答案中包含有关提示的链接。但是，我相信像jQuery UI dialog这样的对话框组件可以更好地满足您的需求。

2012-03-29 13:22:39 Fotakis

我真的结束了使用，谢谢！ – Serafeim 2012-03-29 13:38:49

您可以使用Firebug分析页面，检查实际值的CSS属性（即是什么颜色的边框，或有多少填充有）。

2012-03-23 17:23:41

有一个名为jquery tip-tip的插件可能会做你以后的事情。你基本上想要在你点击的区域上面显示一些HTML。提示提示可以将html显示为点击点之上的“泡泡”。风格也很简单。它主要用于提示工具，但我看不出为什么它不能适应这样做。

（PS你需要使用“内容”属性设置内容）

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

2012-03-23 17:25:16 Magrangs

我认为你说的关于这里的tooltips链接，这将有助于你

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

2012-03-23 17:31:12 uday

也许这个问题在三月份时还没有出现，当时这个问题被问到，但是当前版本的Bootstrap已经像问题中那样出现了。参见：

2012-11-02 19:21:19

Bootstrap rulz！我喜欢新功能:) – Serafeim 2012-11-02 21:33:09

回答