首先在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{ width: 100%; /*height: 500px;*/ background-color: gray; opacity: 0.5; z-index: 998; position: absolute; top: 0px; left: 0px; } .login{ width: 400px; height: 300px; background-color: royalblue; position: fixed; /*left: 200px; top: 300px;*/ z-index: 999; } .close-btn{ width: 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>