首先在Body里边设置Input，并添加点击事件showLogin，用<p>标签做出一段较长的内容使页面可以下拉。设置一个被遮盖的层面mask，然后再设置一个登陆的层面login，并设置关闭按钮close-btn，用X表示。
<body>
<input type="button" value="登录" id="login" />
<script>
document.getElementById("login").onclick = function(){
var x = "<div class='close-btn'>X</div>";
showLogin(x);
}
</script>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div class="mask"></div>
<div class="login">
<div class="close-btn">X</div>
</div>
</body>
然后是设置CSS样式表，先将全局内外边距设为0，然后依次对各个div宽高背景色等进行设置，mask的z-index要设为998，因为它要在login的下面，login是相对于浏览器的，所以要定位成fixed，z-index设为999，关闭按钮close-btn设成小手。
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
100%;
/*height: 500px;*/
background-color: gray;
opacity: 0.5;
z-index: 998;
position: absolute;
top: 0px;
left: 0px;
}
.login{
400px;
height: 300px;
background-color: royalblue;
position: fixed;
/*left: 200px;
top: 300px;*/
z-index: 999;
}
.close-btn{
30px;
height: 30px;
position: absolute;
right: 10px;
top: 10px;
background-color: aquamarine;
text-align: center;
line-height: 30px;
font-size: 30px;
}
.close-btn:hover{
cursor: pointer;
}
</style>
我们接下来要做一个mask出来，不用div里的mask，先把它注释掉。
<!--<div class="mask"></div>-->
用点击事件里的showLogin来做，先创建一个div元素，让它等于一个mask变量，然后为mask赋值，给它一个属性className，让它等于“mask”，给它添一个子元素，注意它的上级是body，然后还要设置一个浏览器高度，这里取body的高度：clientHeight，宽度：clientWidth，接下来给login赋值，跟上边一样。Login的左边及上边的长度是要将body的高度宽度除以2。
script> function showLogin(x){ var bodyHeight = document.body.clientHeight; var clientHeight = document.documentElement.clientHeight; var clientWidth = document.documentElement.clientWidth; var mask = document.createElement("div"); mask.className = "mask"; mask.style.height = bodyHeight + "px"; mask.onclick = function(){ mask.remove(); login.remove(); }; document.body.appendChild(mask); var login = document.createElement("div"); login.className = "login"; login.style.left = clientWidth/2 - 200 + "px"; login.style.top = clientHeight/2 - 150 + "px"; login.innerHTML = x; document.body.appendChild(login); document.getElementsByClassName("close-btn")[0].onclick = function(){ mask.remove(); login.remove(); } } document.body.onresize = function(){ var clientHeight = document.documentElement.clientHeight; var clientWidth = document.documentElement.clientWidth; var login = document.getElementsByClassName("login")[0]; login.style.left = clientWidth/2 - 200 + "px"; login.style.top = clientHeight/2 - 150 + "px"; } </script>