如何创建一个类似于 Google 日历使用的弹出窗口？答案

【问题标题】：How can I create a pop up like the one Google Calendar uses ?如何创建一个类似于 Google 日历使用的弹出窗口？
【发布时间】：2012-03-23 17:19:38
【问题描述】：

当您单击 Google 日历中的空白区域以添加事件时，或者当您单击已放置的事件时，您将看到一个非常漂亮的弹出窗口，其中包含有关该事件的信息（请参见附图）。

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

请注意，弹出窗口的位置取决于我将单击的位置，因此假设我有一个 html 表格，根据我将单击的位置，弹出窗口将在该位置附近生成并指向该特定的 .

还要注意关闭行为（关闭按钮，如果我点击弹出窗口，它将关闭）。

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

谢谢！

【问题讨论】：

【解决方案1】：

有一个名为 jquery tip-tip 的插件可能会满足您的需求。您实际上希望在您单击的区域上方显示一些 HTML。 Tip-tip 可以将 html 显示为您单击的点上方的“气泡”。它也很容易造型。它主要用于工具提示，但我看不出它为什么不能适应这种情况。

（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."

【讨论】：

【解决方案2】：

我假设您正在谈论 tooltips 这里的链接可以帮助您

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

【讨论】：

【解决方案3】：

其他答案包含有关工具提示的链接。不过，我相信像jQuery UI dialog 这样的对话框组件会更好地满足您的要求。

【讨论】：

【解决方案4】：

也许这在 3 月份被问到这个问题时并不存在，但当前版本的 Bootstrap 有类似问题中的弹出框。见：

【讨论】：

【解决方案5】：

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

【讨论】：