6

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

我怎样才能做到这一点？

4

5 回答 5

17

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.
于 2012-05-07T05:53:13.870 回答
7

您可以使用jQuery BlockUI插件。

很简单。

于 2012-05-07T05:58:25.120 回答
4

有可能实现这一点.. 但我遇到的最简单的方法是使用 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();
于 2013-11-04T11:09:46.053 回答
2

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

于 2012-05-07T05:51:45.763 回答
2

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

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

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

于 2012-05-07T05:53:57.067 回答