<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="css/reset.css" type="text/css"> <style type="text/css"> *{ padding: 0; margin: 0; } .main{ width: 100%; height: 1000px; /*margin: 0 auto;*/ background: cyan; color: white; } #mask{ background: #000; opacity: 0.75; /*兼容IE*/ filter: alpha(opacity=75); height: 1000px; width: 100%; /*绝对定位*/ position: absolute; left: 0; top:0; /*设置层级最大*/ z-index: 1000; } #login{ /*静止定位*/ position: fixed; left: 30%; top:30%; /*设置层级最大*/ z-index: 1001; } .loginCon{ width: 670px; height: 380px; background: url("image/loginBg.png")no-repeat; position: relative; } #close{ width: 30px; height: 30px; background: url("image/close.png")no-repeat; cursor: pointer; position: absolute; right: 0; top:0; } #btnLogin{ background: #c9394a; width: 100px; height: 40px; color: white; } </style> </head> <body> <div class="main"> <div id="btnLogin"> 点击按钮显示弹出层 </div> </div> <!--<div class="" id="mask">--> <!--</div>--> <!--<div id="login">--> <!--<div class="loginCon">--> <!--<div id="close">--> <!--</div>--> <!--</div>--> </div> <script type="text/javascript"> function openNew() { //创建元素节点 var oMask=createDiv(); //设置id oMask.id="mask"; //获取页面的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; oMask.style.height=sHeight+'px'; oMask.style.width=sWidth+'px'; //插入到文档中 document.body.appendChild(oMask); var oLogin=createDiv(); oLogin.id="login"; //获取可视区域的宽度和高度 var wHeight=document.documentElement.clientHeight; //如果页面是竖向的那么可视区域的宽度和页面的宽度是一样的 //var wWidth=document.documentElement.clientWidth; document.body.appendChild(oLogin); oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>"; //获取元素的宽度和高度 var doLoginH=oLogin.offsetHeight; var doLoginW=oLogin.offsetWidth; var left=(sWidth-doLoginW)/2; var top=(wHeight-doLoginH)/2 oLogin.style.left=left+'px'; oLogin.style.top=top+'px'; var oClose=getDOM("close"); oMask.onclick=oClose.onclick=function () { //删除子节点 document.body.removeChild(oMask); document.body.removeChild(oLogin); } } window.onload=function () { var oBtn=getDOM("btnLogin"); //点击登录按钮,弹出弹出层 oBtn.onclick=function () { openNew(); } } function getDOM(id) { return document.getElementById(id); } function createDiv() { return document.createElement("div"); } </script> </body> </html>
javaScript实现弹出层效果
最新推荐文章于 2017-10-13 17:36:00 发布