Javascript 使用 jquery 禁用所有具有模态功能的页面元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3674700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable all page elements with modal feature using jquery
提问by viMaL
I wish to disable all page elements upon an action. Like the modalfeature that is in the JQuery UI.
我希望在操作时禁用所有页面元素。就像JQuery UI 中的模态功能一样。
Like on an ajax action.. I wish to show a notification and at the same time to enable the modal feature. And after the request, need to re-enable the page elements back.
就像在 ajax 操作上一样.. 我希望显示一个通知，同时启用模态功能。并且在请求之后，需要重新启用页面元素回来。
Is there any option available in core jquery for that or any plugins?
核心 jquery 中是否有可用的选项或任何插件？
回答by Yi Jiang
The page elements are not disabled - doing that would be quite tedious - but rather, a semi-transparent divis overlayed on top of all other page elements. To do this, you would probably do something like
页面元素没有被禁用——这样做会很乏味——而是半透明div覆盖在所有其他页面元素的顶部。要做到这一点，你可能会做类似的事情
// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
And the CSS:
和 CSS：
#overlay {
position: fixed;
height: 100%;
width: 100%;
z-index: 1000000;
background: url('link/to/semitransparent.png');
}
Then once the action is complete, you simply remove it like this:
然后一旦操作完成，您只需像这样删除它：
overlay.remove();
No need to include jQuery UI if this is the only thing you need it for.
如果这是您唯一需要的东西，则无需包含 jQuery UI。
回答by kgiannakakis
One easy way to achieve this is to define a css class like this:
实现此目的的一种简单方法是定义这样的 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;
}
Use jQuery to add this class to an empty div that is the first child of the body element. Remove the class to disable modal mode.
使用 jQuery 将此类添加到作为 body 元素的第一个子元素的空 div。删除类以禁用模态模式。
Your notification should have a z-index higher than the z-index of the dark-class. All items that need to be disabled must have a lower z-index.
您的通知的 z-index 应该高于 Dark-class 的 z-index。所有需要禁用的项目必须具有较低的 z-index。
回答by Jonas T
I like Jiang's idea but you do not need image with the following overlay style sheet.
我喜欢蒋的想法，但您不需要具有以下叠加样式表的图像。
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index:50;
}
回答by Nate Hammond
Try adding a style of "pointer-events: none;" to the body. To remove it use pointer-events: auto;
尝试添加“pointer-events: none;”样式 到身体。要删除它，请使用指针事件：自动；
More info here https://css-tricks.com/almanac/properties/p/pointer-events/Though there may be issues with earlier browsers not supporting it
更多信息在这里 https://css-tricks.com/almanac/properties/p/pointer-events/虽然早期浏览器不支持它可能存在问题
