javascript弹出层

最新推荐文章于 2017-02-23 13:57:29 发布

啊哈前端

最新推荐文章于 2017-02-23 13:57:29 发布

阅读量1k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

62 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
</head>
<body>
<div id="popupDiv" style="border: 1px solid #ccc;display: none;height: 100px;width: 300px;text-align: center;">
        <p>
            <input type="button" id="popupClose" value="确定" />
        </p>
</div>
<input type="button" id="popupOpen" value="弹出" />
<script>
    window.οnlοad=function(){
        function setCss(_this,cssOption){ //设置元素样式
            //判断节点类型
            if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
            //如果对象为空、节点是注释或空字节、对象不支持style属性，则返回
                        return;
            }
            for(var cs in cssOption){ //枚举出cssOption里的所有属性，并设置相应的样式
                _this.style[cs]=cssOption[cs];
            }
        }
       function setPopup(e,openPop,closePop){
            setCss(e,{ //初始化样式
                "position": "absolute",
                "zIndex": 100,
                "backgroundColor": "#ebedf3"
            });
           openPop.οnclick=function(){
               e.style.display="block";
               setCss(e,{  //修改弹出层的位置，将其定位于屏幕的可见区域中间位置
                    "left": "50%",
                   "marginLeft": -e.offsetWidth/2+"px",
                   "top": ((document.body.scrollTop||document.documentElement.scrollTop)+window.screen.availHeight/2- e.offsetHeight)+"px"
                    //document.body.scrollTop: 网页被卷去的高(document.documentElement.scrollTop为xhtml里面声明了dtd文档的写法)
                   //availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
                   //元素可见区域宽： offsetWidth    (包括边线的宽);
                   /元素可见区域高： offsetHeight   (包括边线的高);
               });
           }
           closePop.οnclick=function(){
               e.style.display="none";
           }
       }
        setPopup(
                document.getElementById("popupDiv"),
                document.getElementById("popupOpen"),
                document.getElementById("popupClose")
        );
    }
</script>
</body>
</html>