javascript实现一个简单的弹出窗

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

html页面:

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

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

background-color: #ccc;

}

</style>

</head>

<body>

<div id="menu">

<div id="login-area">

<button id="btnLogin">登录</button>

</div>

</div>

</body>

</html>

js代码:

<script>

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>

以上是 javascript实现一个简单的弹出窗 的全部内容, 来源链接: utcz.com/z/349974.html

回到顶部