好资源导航 » 文章资讯 » javascript实现一个简单的弹出窗

javascript实现一个简单的弹出窗

2024-03-21 18:42:03 476

功能介绍：点击一个按钮，然后页面会弹出一个窗口，而页面原来的内容会保持不变，只是在其页面上加了一个遮罩层，设置了不透明度，弹出的窗口可设置在固定位置，也可以自由设定，常见于网站的登录按钮。

html页面：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js实现一个弹出框</title>
<styletype="text/css">
/*预先写好弹出窗的样式*/
#menu{height:900px;}
#close{
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:5px;
text-indent:-999em;
background-color:blue;
}
#mask{
background-color:pink;
opacity:0.5;
filter:alpha(opacity=50);
position:absolute;
left:0;
top:0;
z-index:1;
}
#login{
position:fixed;
z-index:2;
}
.loginCon{
position:relative;
width:670px;
height:380px;
/*background:url(img/loginBg.png)#2A2C2Ecentercenterno-repeat;*/
background-color:#ccc;
}
</style>

</head>
<body>
<divid="menu">
<divid="login-area">
<buttonid="btnLogin">登录</button>
</div>
</div>
</body>
</html>

js代码：

<script>
functionopenNew(){
//获取页面的高度和宽度
varsWidth=document.body.scrollWidth;
varsHeight=document.body.scrollHeight;

//获取页面的可视区域高度和宽度
varwHeight=document.documentElement.clientHeight;

varoMask=document.createElement("div");
oMask.id="mask";
oMask.style.height=sHeight+"px";
oMask.style.width=sWidth+"px";
document.body.appendChild(oMask);
varoLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<divclass='loginCon'><divid='close'>关闭</div></div>";
document.body.appendChild(oLogin);

//获取登陆框的宽和高
vardHeight=oLogin.offsetHeight;
vardWidth=oLogin.offsetWidth;
//设置登陆框的left和top
oLogin.style.left=sWidth/2-dWidth/2+"px";
oLogin.style.top=wHeight/2-dHeight/2+"px";
//点击关闭按钮
varoClose=document.getElementById("close");

//点击登陆框以外的区域也可以关闭登陆框
oClose.onclick=oMask.onclick=function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
};
};

window.onload=function(){
varoBtn=document.getElementById("btnLogin");
//点击登录按钮
oBtn.onclick=function(){
openNew();
returnfalse;
}

}
</script>

返回顶部
3162201930
czq8825@qq.com