如何在 JavaScript 警报的情况下禁用整个 HTML 页面？答案

【问题标题】：How can I disable an entire HTML page on an event like in the case of JavaScript alert?如何在 JavaScript 警报的情况下禁用整个 HTML 页面？
【发布时间】：2015-10-14 02:34:12
【问题描述】：

我正在开发一个 JSP/HTML 网页，我必须在按钮单击事件中禁用/“灰屏”整个网页，以便最终用户无法访问网页中的其他元素，直到它已禁用。

我怎样才能做到这一点？

【问题讨论】：

你的意思是像模态的吗？
上面一层。示例：fczaja.blogspot.in/2009/02/disable-all-page-elements-with.html
使用彩盒jacklmoore.com/colorbox

标签： jquery css

【解决方案1】：

CSS：

#cover {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0.80;
   background: #aaa;
   z-index: 10;
   display: none;
}

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.

【讨论】：

但这不会阻止键盘。您仍然可以使用 Tab & Enter 键来点击按钮。

【解决方案2】：

您可以使用jQuery BlockUI插件。

很简单。

【讨论】：

【解决方案3】：

有可能实现这一目标的方法.. 但我遇到的最简单的是使用 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>');

这将为整个主体添加一个div标签。在函数的末尾包含这个

$("#over").remove();

【讨论】：

【解决方案4】：

如果您可以使用 JQuery，并且需要在灰色区域顶部进行一些用户输入，请尝试 JQUery UI Dialog，并将其设置为 modal

【讨论】：

【解决方案5】：

基本技术是在所有内容之上添加一个 100% 宽度和高度的 div。

$('body').append('<div class="cover"/>').css({
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: '999'
});

然后制作你的模态窗口z-index: 1000。

【讨论】：