*{ 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> </head> <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> </html> <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>
效果