本文介绍如何使用 JavaScript 和 CSS 实现一个简单的页面半透明蒙板效果。通过定义两个 div 元素，一个用于覆盖页面并设置半透明背景，另一个用于显示提示信息。结合简单的 JS 函数控制显示与隐藏，实现加载提示或关闭功能。
JavaScript 实现页面半透明蒙板效果
实现页面蒙板效果主要涉及两个 div 元素：其中 popWindow 样式的 div 用于覆盖整个页面并呈现半透明状态；maskLayer 位于 popWindow 之上，用于展示蒙板内的具体信息，例如“载入中……”等提示内容。
hideMask();
具体实现代码如下：
<html>
<head>
<style type="text/css">
.popWindow {
background-color:#9D9D9D;
width: 100%;
height: 100%;
left: 0;
top: 0;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1;
position: absolute;
}
.maskLayer {
background-color:#000;
width: 200px;
height: 30px;
line-height: 30px;
left: 50%;
top: 50%;
color:#fff;
z-index: 2;
position: absolute;
text-align:center;
}
</style>
<script language="javascript" type="text/javascript">
function showDiv() {
document.getElementById('popWindow').style.display = 'block';
document.getElementById('maskLayer').style.display = 'block';
}
function closeDiv() {
document.getElementById('popWindow').style.display = 'none';
document.getElementById('maskLayer').style.display = 'none';
}
</script>
</head>
<body>
<div onclick="showDiv()" style="display:block; cursor:pointer">
弹出蒙板
</div>
<div id="popWindow" class="popWindow" style="display: none;">
</div>
<div id="maskLayer" class="maskLayer" style="display: none;">
<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;">
关闭蒙板
</a>
</div>
</body>
</html>