Javascript 使用jquery禁用具有模式功能的所有页面元素

我希望在一个操作中禁用所有页面元素。与JQuery UI中的模式功能类似

就像在ajax动作中。。我希望显示一个通知，同时启用模式功能。并且在请求之后，需要重新启用页面元素

---

core jquery中是否有任何选项可用于该插件或任何插件？

实现这一点的一个简单方法是定义如下css类：

.dark-class
{
   background-color: #F0F0F0;
   filter:alpha(opacity=50); /* IE */
   opacity: 0.5; /* Safari, Opera */
   -moz-opacity:0.50; /* FireFox */
   z-index: 20;
   background-repeat:no-repeat;
   background-position:center;
   width: 100%;
   height: 100%;
   position:absolute;
   top: 0px;
   left: 0px;
}

使用jQuery将此类添加到作为body元素的第一个子元素的空div中。移除该类以禁用模态模式

---

您的通知的z索引应该高于黑暗类的z索引。所有需要禁用的项目都必须具有较低的z索引。

页面元素没有禁用-这样做会非常繁琐-但是，半透明的

div

覆盖在所有其他页面元素的顶部。要做到这一点，您可能会执行以下操作

// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');

然后，一旦操作完成，您只需按如下方式将其删除：

overlay.remove();

---

如果这是您唯一需要的东西，那么不需要包含jQuery UI

我喜欢Jiang的想法，但您不需要具有以下叠加样式表的图像

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index:50;
}

尝试向正文中添加“指针事件：无；”样式。 要删除它，请使用指针事件：auto

更多信息请点击这里

---

尽管早期浏览器可能不支持它，但是你应该考虑这是否是你想要的行为。这样做将接近于将ajax请求设置为synchronous，这将导致非常糟糕的用户体验。参见gist.github.com/0d04646ab6cf4df50610中的第23-83行和第143-153行。我不担心这个选项卡。我设置了一个警报框，用半透明的div覆盖屏幕，并完全希望用户看到警报框中的消息，并强调了该消息。这一信息以戏剧性的方式呈现，不容错过。如果用户选择绕过消息（不太可能），我并不真正担心，因为还必须进行服务器端验证。如果用户绕过消息并单击不可单击项，则不会发生任何事情。他们已经得到警告。

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index:50;
}