遮罩层-布布扣-bubuko.com

<!DOCTYPE html>
<html>
<head>
    <title>遮罩层示例</title>
    <meta charset="utf-8" />
    <style type="text/css">

        .dialog-back{
            display: none;
            position:  absolute;
            top:0%;
            left:0%;
            width:100%;
            height:100%;
            -moz-opacity: 0.7;
            opacity:.70;
            filter: alpha(opacity=70);
            background-color:black;
            z-index: 1000;
        }

        .dialog-pop{
            display: none;
            position: absolute;
            top: 25%;
            left: 22%;
            width: 53%;
            height: 49%;
            padding: 8px;
            border: 8px solid #E8E9F7;
            background-color: black;
            z-index:1001;
            overflow: auto;
        }

    </style>
</head>
<body>
<div class="main">
    <p>这里是内容页面!</p>
    <input type="button" value="弹出遮罩层" onclick="document.getElementById(‘back‘).style.display=‘block‘;document.getElementById(‘test‘).style.display=‘block‘;" />
    <input type="button" value="遮罩下点击" onclick="alert(‘如果你看到我，说明你的遮罩层有问题哦!‘)" />

</div>
<!--遮罩层-->
<div class="dialog-back" id="back"></div>
<!--位于遮罩层上的弹窗层-->
<div class="dialog-pop" id="test">
    <input type="button" value="查看遮罩层" onclick="alert(‘这里是弹窗层‘);"/>
    <input type="button" value="隐藏遮罩层" onclick="document.getElementById(‘back‘).style.display=‘none‘;document.getElementById(‘test‘).style.display=‘none‘;" />
    <p>这里是弹窗层!</p>
</div>
</body>
</html>