CSS+JS实现DIV蒙板效果
?
点击Show covert DIV,弹出popWindow窗口,背景被透明蒙板覆盖,下层内容操作失效,代码如下:
?
<html>
<head>
<style type="text/css">
??? .popWindow{
??????? text-align: center;
??????? z-index:2;
??????? width:500px;
??????? height:300px;
??????? left: 50%;
??????? top: 50%;
??????? margin-left: -250px;
??????? margin-top: -150px;
??????? position: absolute;
??????? background:#FFFFFF;
??? }
??? .head-box{
??????? width:500px;
??????? height:25px;
??????? background:#4A4AFF;
??? }
??? .maskLayer {
??????? background-color:#9D9D9D;
??????? width: 100%;
??????? height: 100%;
??????? left: 0;
??????? top: 0;
??????? filter: alpha(opacity=50);
??????? opacity: 0.5;
??????? z-index: 1;
??????? position: absolute;
??? }
</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">
????????? Show covert DIV
??? </div>
??? <div id="popWindow" style="display: none;">
??????? <div style="text-align:right;">
???????????? <a href="#" onclick="closeDiv()"? style="cursor:pointer;text-decoration: none;">
???????????? ?<font style="font-size :20px;">? X? </font></a>
??????? </div>
???????? <div value="Back" onclick="closeDiv()" style="cursor:pointer"/>
?????????? </div>
???? </div>
??????? <div id="maskLayer" style="display: none;">
??? </div>
</body>
</html>
