完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
} #mask{
background-color: black;
opacity: 0.3;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
#kuang{
width: 400px;
height: 300px;
background-color: blueviolet;
position: absolute;
z-index: 888;
left: 200px;
top: 250px; }
#close{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 5px;
right: 5px;
z-index: 999;
}
#close:hover{
cursor: pointer;
}
</style> </head>
<body>
<input type="button" value="登陆" onclick="show( )"/> <br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111
<br />111 </body>
</html>
<script type="text/javascript">
function show( ){
// 获取整个页面的宽和高
var page_width =document.documentElement.scrollWidth;
var page_height =document.documentElement.scrollHeight; // 获取浏览器的宽和高
var b_width =document.documentElement.clientWidth;
var b_height = document.documentElement.clientHeight; // 创建一个叫mask的div,id是#mask;
var mask =document.createElement("div");
mask.id ="mask"; // mask的宽和高
mask.style.width =page_width +"px";
mask.style.height = page_height +"px"; // 在body里添加一个mask的子元素;
document.body.appendChild(mask); // 创建一个叫kuang的div,id是#kuang;
var kuang = document.createElement("div");
kuang.id ="kuang"; // kuang 在浏览器水平和垂直居中
kuang.style.left = (b_width - 400) / 2 +"px";
kuang.style.top =( b_height -300) /2 +"px";
// 在kuang里放一个div,id=close
kuang.innerHTML ='<div id ="close"></div>'; // 在body里添加一个kuang的子元素;
var ku =document.body.appendChild(kuang);
alert(ku);
ku.innerHTML+=222222222222222222;
// close做一个点击事件,关闭mask 和 kuang
document.getElementById("close").onclick =function( ){
document.body.removeChild(mask);
document.body.removeChild(kuang);
} // mask做一个点击事件,关闭mask 和 kuang
document.getElementById("mask").onclick =function( ){
document.body.removeChild(mask);
document.body.removeChild(kuang);
} }
</script>
预览图：
