DIV+CSS遮罩层、弹出层

1、实现原理
  1.实际上弹出层、遮罩层显示分别显示在原界面之上 
  2.弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上
  3.遮罩层有通明效果
  4.遮罩层没有实际意义,只是起到弹出层与原界面分离作用

2、代码实现
html语言如下:

<head runat="server">
    <title>DIV CSS遮罩层</title>
    <script language="javascript" type="text/javascript">
        function showdiv() {
            document.getElementById("bg").style.display = "block";
            document.getElementById("show").style.display = "block";
        }
        function hidediv() {
            document.getElementById("bg").style.display = 'none';
            document.getElementById("show").style.display = 'none';
        }
    </script>
    <style type="text/css">
        #bg
        {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity=70);
        }
        #show
        {
            display: none;
            position: absolute;
            top: 25%;
            left: 22%;
            width: 53%;
            height: 49%;
            padding: 8px;
            border: 8px solid #E8E9F7;
            background-color: white;
            z-index: 2;
            overflow: auto;
        }
    </style>
</head>
<body>
    <input id="btnshow" type="button" value="弹出层" onclick="showdiv();" />
    <div id="bg">
    </div>
    <div id="show" onclick="hidediv();">
        我的遮罩层
        <input id="btnclose" type="button" value="X" onclick="hidediv();" />
    </div>
</body>
</html>

 

你可能感兴趣的:(DIV+CSS遮罩层、弹出层)