A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > javascript实现一个简单的弹出窗

javascript实现一个简单的弹出窗

时间:2016-02-23 11:43作者:fang人气:186

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

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,实现,一个,简单,弹出,功能,介绍,点

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号