<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } .mask { width: 100%; height: 500px; background-color: black; opacity: 0.5; position: fixed; top: 0px; left: 0px; z-index: 400; } .out { width: 300px; height: 200px; background-color: green; position: fixed; /*top: 100px; left: 100px;*/ z-index: 998; } </style> <script src="js/sweetalert2.min.js"></script> <link rel="stylesheet" href="css/sweetalert2.min.css" /> </head> <body> <input type="button" value="弹出" id="btn1" /> <div class="mask" hidden="hidden"></div> <div class="out" hidden="hidden"></div> <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> </body> </html> <script> var mask = document.getElementsByClassName("mask")[0]; var out = document.getElementsByClassName("out")[0]; var btn1 = document.getElementById("btn1"); var c_height = document.documentElement.clientHeight; var c_width = document.documentElement.clientWidth; var top_ = c_height / 2 - 100; var left = c_width / 2 - 150; mask.style.height = c_height + "px"; out.style.top = top_ + "px"; out.style.left = left + "px"; btn1.onclick = function() { mask.removeAttribute("hidden"); out.removeAttribute("hidden"); } mask.onclick = function() { mask.setAttribute("hidden", "hidden"); out.setAttribute("hidden", "hidden"); } window.onresize = function() { var c_height = document.documentElement.clientHeight; var c_width = document.documentElement.clientWidth; var top_ = c_height / 2 - 100; var left = c_width / 2 - 150; mask.style.height = c_height + "px"; out.style.top = top_ + "px"; out.style.left = left + "px"; } swal( '1', '2', 'success' ) </script>