寻找JS/JQuery完全模态覆盖层

Question

我需要一个模态覆盖层，可以阻止用户与页面的其他部分进行交互，并且用户不能关闭它。但我找不到一个不必覆盖现有功能（如删除X按钮或删除esc-to-close功能）的插件。

有人知道能做到这一点的JQuery插件或其他JS库吗？更小和更简单的最好...

实际上，这相当容易自己编写（用100％透明的div覆盖整个页面），但要完美实现比较困难（如果用户调整窗口大小怎么办？键盘tab键怎么办？）。所以理想情况下，我会使用插件，但我讨厌为我的需求配置插件，因为它们似乎永远无法完美地满足我的需求！

- Tony R

---

如果您告诉我们您为什么要寻找这个，回答您的问题会更容易。当模态框弹出时，您不希望用户与您的网站进行交互的目的是什么？您不想删除 x 按钮有什么问题？请更具体地说明。 - Mark Kramer

有什么关系吗？我认为我已经很清楚地描述了问题。我正在执行一个AJAX操作，而在此过程中，我希望防止用户与整个页面进行交互（你能说“进度旋转器”吗？）。必胜客的订购系统在处理您的订单时确实会执行此操作。修改现有插件会带来许多麻烦，主要原因是很难知道底层发生了什么。我更喜欢具有此功能的插件内置。这不是一个常见的问题吗？ - Tony R

如果我们知道你为什么提出这个问题，那么回答问题就会更容易。听起来最简单的方法是使用一个带有中心 .gif（进度旋转器）的叠加层，然后在 AJAX 操作完成时将它们淡出。 - Mark Kramer

@Mark，请看一下我对另一个答案的评论。 - Tony R

这并不是全面的，但如果你需要非常轻量级的东西，它可以是一个很好的开始。http://jsfiddle.net/mharen/sbtVd/1/ - Michael Haren

Answer 1

http://developer.yahoo.com/yui/examples/container/panel-loading.html

幸运的是我已经在使用YUI了，只是忽略了这个。正是我想要的。

- Tony R

---

我同意！看看这个例子，你甚至可以指定要放在头部和正文中的内容。自定义进度旋转GIF即将到来！ - Tony R

Answer 2

我认为只需添加覆盖层div会更容易且需要的代码更少，而不是使用任何库。

$('<div></div>').css({ top: 0, bottom: 0, left: 0, right: 0, position: absolute, zIndex: 1000 }).appendTo(document.body);

- Andrey M.

---

这也无法解决标签问题。我有一个同事的公司正在编写一个庞大的JavaScript框架，他们花了很多时间来完善模态覆盖和对话框。因此，我知道要完美地做这种事情有许多细节需要注意，因此我正在寻找插件/库。 - Tony R

Answer 3

您可以使用仅 CSS 完成此操作，使用叠加层 div，该 div 的位置绝对定位为其容器的顶部、左侧、右侧和底部，如下所示：

HTML

<div class="overlay"></div>
<div class="content">
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
    <button type="button">Click Me!</button>
</div>

CSS

.content {
    width:400px;
    height:400px;
    position:relative;
    z-index:1;
}

.overlay {
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    display:block;
    z-index:2;
    background:transparent;
}

演示 http://jsfiddle.net/andresilich/WHEK3/4/

- Andres Ilich

---

这个存在 OP 提到的制表符问题。 - Michael Haren