演示地址：http://sandbox.runjs.cn/show/irefekbs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0;} #login { z-index:9999; height: 200px; width: 300px; background: #ccc; padding-top: 30px; box-shadow: 0 0 20px rgba(0,0,0, 0.2); border-radius: 5px; position: absolute; /*top: 225px; left: 500px;*/} #login p { margin: 10px auto; width: 250px; } #login p:nth-child(1) { margin-top: 50px; } #close { position: absolute; top: 10px; right: 10px; cursor: pointer;} #loading-mask {position: absolute; top: 0; left: 0; /* 100%; height: 1030px;*/ background: rgba(0,0,0, 0.4);} </style> <script type='text/javascript' src='http://files.cnblogs.com/littledu/littledu.js'></script> <script> $(function(){ $('#open').click(function(){ //遮罩层 var mask = $('<div id="loading-mask"></div>'); mask.css('width', $('body').width()); mask.css('height', $('body').height()); $('body').append(mask); //弹窗 var oLogin = $('<div id="login"><p>用户名：<input type="text"></p><p>密 码：<input type="text"></p><div id="close">X</div></div>'); $('body').append(oLogin); //设置弹窗的显示位置 oLogin.css('left', ($(window).width() - oLogin.width())/2 ); oLogin.css('top', ($(window).height() - oLogin.height())/2 ); //浏览器窗口或滚动条改变时 $(window).on('resize scroll', function(){ oLogin.css('left', ($(window).width() - oLogin.width())/2 + $(window).scrollLeft()); oLogin.css('top', ($(window).height() - oLogin.height())/2 + $(window).scrollTop()); }); //移除遮罩和弹窗 $('#close').click(function(){ mask.remove(); oLogin.remove(); }); }); }); </script> </head> <body style="height:1000px;"> <!-- <div id="loading-mask"></div> --> <input type="button" value="弹窗" id="open"> <!-- <div id="login"> <p>用户名：<input type="text"></p> <p>密 码：<input type="text"></p> <div id="close">X</div> </div> --> </body> </html>