javascript实现一个简单的弹出窗

更新时间：2026-02-18 21:10:50作者：fang

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

html页面：

<!DOCTYPE html>

<head>

<title>js实现一个弹出框</title>

/*预先写好弹出窗的样式*/

#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) #2A2C2E center center no-repeat;*/

background-color: #ccc;

}

</style>

</head>

<body>

</div>

</body>

</html>

js代码：

function openNew(){

//获取页面的高度和宽度

var sWidth=document.body.scrollWidth;

var sHeight=document.body.scrollHeight;

//获取页面的可视区域高度和宽度

var wHeight=document.documentElement.clientHeight;

var oMask=document.createElement("div");

oMask.id="mask";

oMask.style.height=sHeight+"px";

oMask.style.width=sWidth+"px";

document.body.appendChild(oMask);

var oLogin=document.createElement("div");

oLogin.id="login";

oLogin.innerHTML="<div class='loginCon'><div id='close'>关闭</div></div>";

document.body.appendChild(oLogin);

//获取登陆框的宽和高

var dHeight=oLogin.offsetHeight;

var dWidth=oLogin.offsetWidth;

//设置登陆框的left和top

oLogin.style.left=sWidth/2-dWidth/2+"px";

oLogin.style.top=wHeight/2-dHeight/2+"px";

//点击关闭按钮

var oClose=document.getElementById("close");

//点击登陆框以外的区域也可以关闭登陆框

oClose.onclick=oMask.onclick=function(){

document.body.removeChild(oLogin);

document.body.removeChild(oMask);

};

window.onload=function(){

var oBtn=document.getElementById("btnLogin");

//点击登录按钮

oBtn.onclick=function(){

openNew();

return false;

}

</script>

以上就是本文章的内容，希望对大家有所帮助