演示地址：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)
)
