1、首先需要一个触发按钮或者a标签
<body>
<div class="login-boreder">
<a href="javascript:;" id="btnLogin">登录</a>
</div>
</body>
2、在js里面获取该标签的id
window.onload = function(){
var oBtn = document.getElementById("btnLogin");
oBtn.onclick = function(){
openNew();
}
}
3、获得页面的高度和宽度
var yHeight = document.documentElement.scrollHeight;
var yWidth = document.documentElement.scrollWidth;
4、获得屏幕可视区域的高度和宽度
var kHeight = document.documentElement.clientHeight;
var kWidth = document.documentElement.clientWidth;
5、创建遮罩层
var oMask = document.createElement("div");
oMask.id = "mask";
oMask.style.height = yHeight+"px";
oMask.style.width = yWidth+"px";
document.body.appendChild(oMask);
6、创建登录界面
ar oLogin = document.createElement("div");
oLogin.id = "login";
oLogin.innerHTML = "<div class='loginCon'><div class='loginTop'><span class='loginSpan'>登录</span><div id='close'></div></div></div>";
document.body.appendChild(oLogin);
7、使得登录界面居中显示
var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;
oLogin.style.left = kWidth/2 - dWidth/2 + "px";
oLogin.style.top = kHeight/2 - dHeight/2 + "px";
8、关闭登录界面
点击关闭按钮可以关闭登录界面
点击登录界面外的遮罩层关闭登录界面
var oClose = document.getElementById("close");
oMask.onclick = oClose.onclick = function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
}
}
9、完整代码
opactity:0.75为设置遮罩层的透明度
filter:alpha(opacity = 75):为了兼容IE-8以下的IE浏览器
z-index:1000:设置遮罩层的层数
background:url() no-repeat:为了使得背景图片不重复
text-decoration: none:去掉超链接下面的下划线
document.getElementById():获得标签的id
document.createElement():创建一个标签
document.body.appendChild:将指定的DOM类型的节点加到document.body的末尾
document.body.removeChild:删除document.body末尾指定的DOM类型的节点
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#mask {
background-color: #000;
opacity: 0.75;
/*为了兼容IE-8以下的IE浏览器*/
filter: alpha(opacity = 75);
height: 969px;
width: 100%;
position:absolute;
z-index: 1000;
top: 0;
left: 0;
}
#login {
/*固定屏幕定位*/
position: fixed;
left: 30%;
top: 30%;
z-index: 1001;
}
.loginCon {
width: 670px;
height: 380px;
background:white;
position: relative;
}
.loginTop {
height: 50px;
width: 100%;
background:red;
}
.loginSpan {
height: 50px;
line-height: 50px;
font-size: 20px;
font-style: bold;
margin-left: 5px;
}
#close {
width: 30px;
height: 30px;
/*no-repeat的功能是使得背景图片不重复*/
background:url(./Lianjia/close.png) no-repeat;
cursor: pointer;
position: absolute;
right: 7px;
top: 7px;
}
a {
text-decoration: none;
}
.login-boreder {
height: 30px;
line-height: 30px;
text-align: center;
margin:0 auto;
width: 80px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function openNew(){
//获取页面的高度和宽度
var yHeight = document.documentElement.scrollHeight;
var yWidth = document.documentElement.scrollWidth;
//获取页面的可视区域高度和宽度
var kHeight = document.documentElement.clientHeight;
var kWidth = document.documentElement.clientWidth;
//创建遮罩层
var oMask = document.createElement("div");
oMask.id = "mask";
oMask.style.height = yHeight+"px";
oMask.style.width = yWidth+"px";
document.body.appendChild(oMask);
//登录界面
var oLogin = document.createElement("div");
oLogin.id = "login";
oLogin.innerHTML = "<div class='loginCon'><div class='loginTop'><span class='loginSpan'>登录</span><div id='close'></div></div></div>";
document.body.appendChild(oLogin);
//获取登录框的宽和高
var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;
oLogin.style.left = kWidth/2 - dWidth/2 + "px";
oLogin.style.top = kHeight/2 - dHeight/2 + "px";
//创建关闭按钮
var oClose = document.getElementById("close");
oMask.onclick = oClose.onclick = function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
}
}
window.onload = function(){
var oBtn = document.getElementById("btnLogin");
oBtn.onclick = function(){
openNew();
}
}
</script>
</head>
<body>
<div class="login-boreder">
<a href="javascript:;" id="btnLogin">登录</a>
</div>
</body>
</html>