使用 jQuery 创建模态面板答案

【问题标题】：Creating a modal panel with jQuery使用 jQuery 创建模态面板
【发布时间】：2011-03-10 10:06:24
【问题描述】：

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

有像 jQuery UI 的对话框这样的简单库吗？我很想使用 jQuery UI，但他们的模态对话框窗口有一个标题栏和关闭按钮，我不能轻易删除。

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

【问题讨论】：

标签： jquery jquery-ui modal-dialog simplemodal

【解决方案1】：

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

/* 创建没有关闭按钮的对话框 */ .ui-dialog-no-close-button .ui-dialog-titlebar-close { 显示：无； } /* 创建没有标题栏的对话框 */ .ui-dialog-no-titlebar .ui-dialog-titlebar { 显示：无； }

然后将其添加到 dialogClass 属性中：

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

【讨论】：

【解决方案2】：

你看过SimpleModal吗？

您可以下载一些demos 以用作基础或学习。你也可以直接在谷歌代码上download这个库。

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

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

您可以包括以下选项：

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

【讨论】：

【解决方案3】：

我真的很喜欢来自 JQuery Tools 的 overlay dialog。它在对话框后面有一个掩码选项，演示为here。

【讨论】：

看起来不错，我去看看。谢谢。