Question

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

Answer 1

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

.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

弹出div后面的

创建另一个div（即.zindex必须低于弹出zindex）

<div class="overlay"></div

的CSS：

.overlay {position：absolute;顶部：0;左：0;身高：100％;宽度：100％}

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

.overlay {position：absolute;顶部：0;左：0;身高：100％;宽度：100％;背景色：＃000;不透明度：0.2; }

编辑：

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

阻止屏幕弹出javascript

2 个答案: