[讀碼時間] 彈出層效果

說明：代碼來自網絡。注釋為筆者學習時添加。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>彈出層效果</title>                                                                                                     
    <style>
        html,body{
            height:100%; 
            overflow:hidden;
        }
        body,div,h2{ /*内外邊距歸零*/
            margin:0; 
            padding:0;
        }
        body{
            font:12px/1.5 Tahoma;/*字号行高字型*/
        }
        center{
            padding-top:10px;
        }
        button{
            cursor:pointer;
        }
        #overlay{
            position:absolute;/*絕對定位*/
            top:0; /*居于左上角*/
            left:0;
            width:100%;
            height:100%;
            background:#000; /*背景黑色*/
            opacity:0.5;/*半透明*/
            filter:alpha(opacity=50);
            display:none;/*預設不顯示*/
        }
        #win{   /*彈出的視窗*/
            position:absolute; /*絕對定位*/
            top:50%;/*上下左右居中*/
            left:50%;
            width:400px;
            height:200px;
            background:#fff;/*背景白色*/
            border:4px solid #f90;
            margin:-102px 0 0 -202px;
            display:none; /*預設隐藏*/
        }
        h2{
            font-size:12px;
            text-align:right;
            background:#fc0;/*黃色*/
            border-bottom:3px solid #f90;/*深黃色*/
            padding:5px;
        }
        h2 span{
            color:#f90;
            cursor:pointer;/*手形*/
            background:#fff;/*白色*/
            border:1px solid #f90;
            padding:0 2px;
        }
    </style>
    <script>
        window.onload = function () {
            var oWin = document.getElementById("win"); //擷取win元素引用
            var oLay = document.getElementById("overlay");//擷取overlay元素引用
            var oBtn = document.getElementsByTagName("button")[0];//擷取button集合中的第一個按鈕引用
            var oClose = document.getElementById("close");//擷取span元素的引用
            oBtn.onclick = function () { //注冊button的click事件，設定display值為block，顯示
                oLay.style.display = "block";　　
                oWin.style.display = "block";
            };
            oClose.onclick = function () {//注冊關閉按鈕的click事件，設定display值為none隐藏
                oLay.style.display = "none";
                oWin.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <div id="overlay"></div> <!--遮罩層，顯示時整個頁面顯示為灰色-->
    <div id="win"><h2><span id="close">x</span></h2></div>
    <center><button>彈出層</button></center><!--按鈕，center元素已廢棄-->
</body>
</html>
View Code
轉載于:https://www.cnblogs.com/sx00xs/p/6435921.html