[读码时间] 弹出层效果

说明：代码来自网络。注释为笔者学习时添加。

<!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

 

posted @ 2017-02-23 22:39  sx00xs  阅读(113)  评论(0)  编辑  收藏  举报