使用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

有