如何創建一個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

回答