使用jQuery創建模態面板

Question

我想彈出一個面板（如沒有標題欄或調整大小的彈出窗口），其中背景變暗。如果你點擊黑暗的背景，面板就會關閉。

有沒有像jQuery UI的對話框這樣做一些很好的簡單庫？我很樂意使用jQuery UI，但是他們的模態對話窗口有一個標題欄和關閉按鈕，我不能輕易刪除。

理想情況下，面板在鼠標光標旁邊彈出（如果太接近瀏覽器的邊框，則適當移動）。

Answer 1

你也可以用一些CSS的去除JQuery用戶界面的對話框的標題欄（或唯一的關閉按鈕）你看着SimpleModal？

有幾個demos，你可以下載使用作爲基地或學習。您也可以直接在Google代碼上直接使用庫download。

所有你需要做的是包括JS文件，設置一些默認樣式（CSS或作爲選項），並遠離你去：

$('#some-element').modal(); 

您可以包括您的選項如下：

$('#some-element').modal({options}); 

Answer 2

我真的很喜歡JQuery Tools的overlay dialog。它有一個對話框後面的掩碼選項，演示here。

 
/* Create dialogs without close button */ 
.ui-dialog-no-close-button .ui-dialog-titlebar-close { 
    display: none; 
} 

/* Create dialogs without title bar */ 
.ui-dialog-no-titlebar .ui-dialog-titlebar { 
    display: none; 
} 

然後將其添加到dialogClass屬性：

 
$("#dialogdiv").dialog({ 
    ... 
    dialogClass: "ui-dialog-no-close-button", 
    ... 
}); 

Answer 3

有