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

Question

我想在动作时禁用所有页面元素.就像JQuery UI中的模态功能一样.

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

核心jquery中是否有针对该插件或任何插件的可用选项？

Answer 1

页面元素未被禁用 - 这样做非常繁琐 - 而是半透明div覆盖在所有其他页面元素之上.要做到这一点,你可能会做类似的事情

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

而CSS:

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
  background: url('link/to/semitransparent.png');
}

然后,一旦操作完成,您只需将其删除如下:

overlay.remove();

如果这是您需要的唯一内容,则无需包含jQuery UI.

Answer 2

实现此目的的一种简单方法是定义一个这样的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将此类添加到空div中,该div是body元素的第一个子元素.删除类以禁用模态模式.

您的通知的z-index应高于暗级的z-index.需要禁用的所有项目必须具有较低的z-index.

Answer 3

我喜欢江的想法,但你不需要带有以下叠加样式表的图像.

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