阻止JavaScript中简单模态对话框的背景

blocking background of a simple modal dialog in javascript

本文关键字：对话框 背景 模态 简单 JavaScript 阻止      更新时间：2023-09-26

我在JavaScript中有一个简单的模态对话框，我自己做。css 如下：

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color: rgba(0, 0, 0, 0.6);
}
#show {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:justify;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     font-weight: bold;
     line-height: 20px;
}

javascript如下：

function overlay() {
    var el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    if (el.style.visibility == "visible"){
        el.scrollIntoView();
    } 
}

我遇到的问题比看起来更大。我从网络上获取了这个模态对话框代码，只用javascript和css制作一个简单的模态，但我想构建一个完整的模态窗口，这个窗口占用了浏览器中100%的可见空间，但是如果你向下滚动，你可以看到页面仍然存在覆盖层后面， 因为覆盖不会占用网页的 100%，而只会占用用户可以看到的 100% 的部分。

当用户向下滚动覆盖时，我是否必须禁止该行为？我怎样才能做到这一点？

有什么提示吗？谢谢。

你可以做：

$('#overlay').height($(document).height());

或固定叠加位置

#overlay{
position:fixed;
}

很简单，只需更改覆盖层的 css：

#overlay {
     position: fixed;
     overflow: auto;
     ...
}

然后在 javascript 函数中添加这些行（在 "if" 语句之外）：

var b = document.getElementsByTagName("body")[0];
b.style.overflow = (b.style.overflow == "") ? "hidden" : "";
相关文章：