使用 jQuery 创建模式面板

Question

我想弹出一个面板（如没有标题栏或调整大小的弹出窗口），其中背景变暗。如果单击深色背景，面板将关闭。

是否有一些好的简单库可以像 jQuery UI 的对话框一样执行此操作？我很想使用 jQuery UI，但它们的模式对话框窗口有一个带有关闭按钮的标题栏，我无法轻松删除。

理想情况下，面板会在鼠标光标旁边弹出（如果太靠近浏览器边框，则适当移动）。

Answer 1

您还可以使用一些 CSS 删除 JQuery UI 的对话框标题栏（或仅删除关闭按钮）：

/* 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 2

您看过 SimpleModal 吗？

您可以下载一些演示作为基础或学习。您还可以直接在 Google 代码上下载该库。

您需要做的就是包含 JS 文件，设置一些默认样式（CSS 或作为选项），然后就可以了：

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

您可以包含您的选项，如下所示：

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

Answer 3

我真的很喜欢 JQuery Tools 中的覆盖对话框。它在对话框后面有一个遮罩选项，请在此处进行演示。