您的位置：首页 > Web前端 > JavaScript

JavaScript实现带遮罩的弹出层

2015-02-05 11:25 225 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{
background: url(bg.png) no-repeat;
height:1000px;}
#mask{
background:#000;
height:1000px;
width:100%;
opacity:0.55;
filter:alpha(opacity=55);
position:absolute;
top:0;
left:0;
z-index:1000;}
#login{
height:470px;
width:380px;
position:fixed;
top:30%;
left:30%;
z-index:1001;
}
.loginCon{
width:470px;
height:380px;
background:url(login.png) no-repeat;
position:relative;}
#close{
width:30px;
height:30px;
background:url(close.png) no-repeat;
cursor:pointer;
position:absolute;
top:5px;
right:5px;
}
#btnLogin{
width:90px;
height:30px;
position:absolute;
left:45%;}
</style>
<script>
//节点创建、获取、删除、页面高度获取、可视区域获取、定位
function openNew(){
//获取页面的高度和宽度
var sHeight=document.documentElement.scrollHeight;
var sWidth=document.documentElement.scrollWidth;
//获得可视区域的宽度和高度
var wHeight=document.documentElement.clientHeight;
//alert(wHeight);
//var wWidth=document.documentElement.clientWidth;竖向页面，页面与可视区域宽带一样。
var oMask=document.createElement("div");
oMask.id="mask";
oMask.style.width=sWidth+"px";//记得单位
oMask.style.height=sHeight+"px";
document.body.appendChild(oMask);
var oLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>";//JS里每一个换行相当于执行一个新的语句
document.body.appendChild(oLogin);//进入DOM后才能继续以下操作
var lWidth=oLogin.offsetWidth;
var lHeight=oLogin.offsetHeight;
var left=(sWidth-lWidth)/2;
var top=(wHeight-lHeight)/2;
oLogin.style.left=left+"px";
oLogin.style.top=top+"px";
var oClose=document.getElementById("close");
oMask.onclick=oClose.onclick=function(){//事件可以穿起来
document.body.removeChild(oMask);//不能直接使用Id名
document.body.removeChild(oLogin);
}
}
window.onload=function(){
var btnLogin=document.getElementById("btnLogin");
btnLogin.onclick=function(){//事件名称不采用驼峰标记
openNew();
}
}
</script>
</head>
<body>
<input type="button" id="btnLogin" value="登 录">
<!--<div id="mask"></div>
<div id="login">
<div class="loginCon">
<div id="close"></div>
</div>
</div>-->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航