jQuery 在 JavaScript 警报的情况下，如何在事件上禁用整个 HTML 页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10477267/
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
How can I disable an entire HTML page on an event like in the case of JavaScript alert?
提问by Tokendra Kumar Sahu
I am developing a web page in JSP/HTML in which I have to disable/ 'gray screen' an entire web page on a button click event so that an end user can't access the other element in web page until it's disabled.
我正在用 JSP/HTML 开发一个网页，其中我必须在按钮单击事件上禁用/“灰屏”整个网页，以便最终用户无法访问网页中的其他元素，直到它被禁用。
How can I accomplish this?
我怎样才能做到这一点？
回答by KBN
CSS:
CSS：
#cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.80;
background: #aaa;
z-index: 10;
display: none;
}
HTML :
HTML :
<body>
<div id="wrap">
// your normal contents here
</div>
<div id="cover"> </div>
</body>
jquery :
查询：
//trigger on whatever event required.
$("#cover").fadeIn(100);
alert("something");
$("#cover").fadeOut(100); //after done.
回答by blasteralfred Ψ
回答by vicky
There are may ways to achieve this.. but the simplest one which i came across is to use div tag to cover the page and then remove it when event is complete
可能有多种方法可以实现这一点..但我遇到的最简单的方法是使用 div 标签覆盖页面，然后在事件完成时将其删除
$('body').append('<div id="over" style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');
This will add a div tag to whole body.At the end of function include this
这将为整个 body 添加一个 div 标签。在函数的末尾包括这个
$("#over").remove();
回答by Eran Medan
If you can use JQuery, and need some user input on top the gray area, try JQUery UI Dialog, and set it as modal
如果您可以使用 JQuery，并且需要在灰色区域顶部进行一些用户输入，请尝试JQUEry UI Dialog，并将其设置为模态
回答by elclanrs
The basic technique for this is to add a 100% width and height div on top of everything.
其基本技术是在所有内容之上添加一个 100% 宽度和高度的 div。
$('body').append('<div class="cover"/>').css({
position: 'absolute',
height: '100%',
width: '100%',
zIndex: '999'
});
Then make your modal window z-index: 1000.
然后制作你的模态窗口z-index: 1000。
