演示地址：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; /*width: 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>
![[ext/iconv/iconv.lo] Error 1](http://pic.xiahunao.cn/[ext/iconv/iconv.lo] Error 1)
)
