首页 > Web开发 > 详细

js弹出层学习

时间:2015-11-13 01:02:29      阅读:225      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mask{
width:100%;
height: 1000px;
position:absolute;
top:0;
left:0;
opacity:0.75;
background: #ccc;
filter: alpha(opacity=75);
z-index:1000;
}
#login{
position:fixed;
left:30%;
top:30%;
z-index:1001;
}
.loginCon{
width:670px;
height:380px;
background:url(img/loginbg.png) no-repeat;
position:relative;
}
#close{
width: 30px;
height: 30px;
position: absolute;
background: url("img/close.png") no-repeat;
top:5px;
right:5px;

}
</style>
<script>
function openNew()
{
//获取的是窗口的宽度和高度,
var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;
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 vHeight = document.documentElement.clientHeight;

//获取某个对象的宽度和高度
var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;

//为了让其居中,
oLogin.style.left = (sWidth-dWidth)/2 + "px";
oLogin.style.top = (vHeight-dHeight)/2 +"px";

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

oClose.onclick = oMask.onclick = function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
}
}
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
openNew();
}
}



</script>
</head>
<body>
<button id="btn">登陆</button>
</body>
</html>

js弹出层学习

原文:http://www.cnblogs.com/php-linux/p/4960716.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!