javascript - 弹出javascript时阻止屏幕

Question

我创建了一个弹出窗口，它是一个 div 元素，我想在它显示时阻止屏幕，它像常规对话框模型一样由 div 上的十字符号关闭。如何在弹出时阻止屏幕并在关闭时取消阻止。

Answer 1

这是我使用的代码，它将在整个屏幕上显示透明 div。

http://jsfiddle.net/ZFxWz/

.box {
    display:;
    filter: alpha(opacity=30);
    text-align:center;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: .30;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    background-color:black;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}

Answer 2

在 popup div 后面创建另一个 div（即 zindex 必须低于 popup zindex）

<div class="overlay"></div

CSS：

.overlay { 位置：绝对；顶部：0；左：0；高度：100%；宽度：100% }

如果您希望屏幕看起来更暗或更亮，您还可以设置背景颜色和不透明度。

.overlay { 位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；背景颜色：#000；不透明度：0.2；}

编辑：

由于覆盖层位于所有其他元素之上，并且您无法单击图层，因此基本上它会阻塞屏幕。您可以访问叠加层后面的元素的唯一方法是单击叠加层并按 Tab。为防止这种情况，您必须将点击事件绑定到覆盖，这将在您的弹出窗口中保持焦点。