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吗？

您可以下载一些demos作为基础或用于学习。您也可以直接在Google代码上download使用该库。

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

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

您可以按如下方式添加选项：

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

Answer 3

我非常喜欢JQuery Tools的overlay dialog。它有一个选项，可以在对话框后面显示一个掩码，演示here。

使用jQuery创建模式面板

3 个答案: