<style> * { margin: 0px; padding: 0px; } #mask { 100%; /*height: 500px;*/ background-color: black; opacity: 0.5; position: fixed; top: 0px; left: 0px; z-index: 990; } #login { 300px; height: 200px; position: fixed; /*top: 50px; left: 200px;*/ background-color: royalblue; z-index: 999; } #login-close { 50px; height: 50px; position: absolute; top: 10px; right: 10px; background-color: red; } </style> <link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css" /> <script src="js/sweetalert2.min.js"></script> </head> <body> <input type="button" value="登录/注册" onclick="loginShow()" /> <input type="button" value="OOOOO" id="btn-test" /> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <!--<div id="mask"></div> <div id="login"> <div id="login-close"></div> </div>--> </body> </html> <script> // alert(document.documentElement.clientHeight); function loginShow() { var mask = document.createElement("div"); mask.id = "mask"; mask.style.height = document.body.clientHeight + "px"; mask.onclick = function() { close(mask); close(login); // alert(this); } document.body.appendChild(mask); // alert(this); var login = document.createElement("div"); login.id = "login"; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; login.style.top = height / 2 - 100 + "px"; login.style.left = width / 2 - 150 + "px"; var login_close = document.createElement("div"); login_close.id = "login-close"; login_close.onclick = function() { close(mask); close(login); } login.appendChild(login_close); document.body.appendChild(login); } function close(x) { document.body.removeChild(x); } window.onresize = function() { var login_re = document.getElementById("login"); var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; login_re.style.top = height / 2 - 100 + "px"; login_re.style.left = width / 2 - 150 + "px"; } document.getElementById("btn-test").onclick = function() { swal( '成功!', '你成功了!', 'success' ) } </script>