javascript - 如何创建一个像 Google 日历使用的那样的弹出窗口？

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

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

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

还要注意关闭行为(关闭按钮，如果我单击弹出窗口，它将关闭)。

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

谢谢!

Google calendar popup

最佳答案

有一个名为 jquerytip-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."

关于javascript - 如何创建一个像 Google 日历使用的那样的弹出窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9843647/