<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:16px; } .hide{ display:none; } .div-back{ height:1200px; width:100%; background-color:#add8e6; } .div-back li{ font-size:5rem; } .div-back #btn-pop{ width:60px; height:30px; background-color:#eee; text-align:center; line-height:30px; } .pop-window{ position:absolute; background-color:rgba(0,0,0,0.5); width:100%; height:100%; } .pop-window .pop-container{ position:fixed; border-radius:10px; padding:2rem; width:80%; left:10%; background-color:#5f9ea0; } .pop-window .pop-container .footer .pop-close{ margin:2rem auto; width:60px; height:30px; background-color:#eee; text-align:center; line-height:30px; } </style> </head> <body> <div class="pop-window hide"> <div class="pop-container"> <ul> <li>this is the very long long content of pop window.</li> <li>this is the very long long content of pop window.</li> <li>this is the very long long content of pop window.</li> <li>this is the very long long content of pop window.</li> <li>this is the very long long content of pop window.</li> <li>this is the very long long content of pop window.</li> <li>this is the very long long content of pop window.</li> </ul> <div class="footer"> <div class="pop-close" id="pop_close" onclick="close_window();">close</div> </div> </div> </div> <div class="div-back"> <div id="btn-pop" onclick="pop_window();">pop</div> <ul> <li>this is the very long long content.</li> <li>this is the very long long content.</li> <li>this is the very long long content.</li> <li>this is the very long long content.</li> <li>this is the very long long content.</li> <li>this is the very long long content.</li> </ul> </div> </body> </html> <script> var $=function(selector){ return document.querySelector(selector); } function pop_window(){ $('.pop-window').style.display = "block"; // calculate lengh of top.使弹框垂直居中 var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight; var h_pop = $('.pop-container').offsetHeight; var topval = (h-h_pop)/2; $('.pop-container').style.top=topval +"px"; // stop scroll of back layer.禁止蒙层底部滚动 $('html').style.overflow="hidden"; $('body').style.overfolw="hidden"; } function close_window(){ $('.pop-window').style.display="none"; $('html').style.overflow="auto"; $('body').style.overflow="auto"; } </script>