JavaScript实现弹出窗口并禁用页面背景交互的完整示例

JavaScript实现弹出窗口并禁用页面背景交互的完整示例

若尚未掌握，可参考下述简易示例。

<html>
<head>
<title>弹窗后禁用背景层交互</title>
<script>
function show() //用于显示遮罩层及弹出窗口
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //启用遮罩层显示
hidebg.style.height=document.body.clientHeight+"px"; //将遮罩层高度设为当前视口高度
document.getElementById("hidebox").style.display="block"; //启用弹出窗口显示
}
function hide() //用于隐藏遮罩层及弹出窗口
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
</script>
<style>
body { margin:0px;padding:0px;text-align: center;}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*宽度设为100%以确保遮罩层完全覆盖原页面*/
filter:alpha(opacity=60); /*IE浏览器透明度设为60%*/
opacity:0.6; /*非IE浏览器透明度设为60%*/
display:none; /* https://www.jb51.net */
z-Index:2;}
#hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
#content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">点击关闭</div>
<div id="content" onClick="show();">点击试试</div>
</body>
</html>