jquery完全遮盖+弹出框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script> <style type="text/css"> #dialog-overlay { width: 100%; height: 100%; filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; position: absolute; background: #000; top: 0; left: 0; z-index: 3000; display: none; } #dialog-box { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #eee; width: 328px; position: absolute; z-index: 5000; display: none; } #dialog-box .dialog-content { text-align: left; padding: 10px; margin: 13px; color: #666; font-family: arial; font-size: 11px; } a.button { margin: 10px auto 0 auto; text-align: center; background-color: #e33100; display: block; width: 50px; padding: 5px 10px 6px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); position: relative; cursor: pointer; } a.button:hover { background-color: #c33100; } #dialog-box .dialog-content p { font-weight: 700; margin: 0; } #dialog-box .dialog-content ul { margin: 10px 0 10px 20px; padding: 0; height: 50px; } </style> <script type="text/javascript"> $(document).ready(function() { $('a.btn-ok, #dialog-overlay, #dialog-box').click(function() { $('#dialog-overlay, #dialog-box').hide(); return false; }); $(window).resize(function() { if (!$('#dialog-box').is(':hidden')) popup(); }); }); //Popup dialog function popup(message) { var maskHeight = $(document).height();//重点 var maskWidth = $(window).width();//重点 var dialogTop = (maskHeight / 2) - ($('#dialog-box').height() / 2);//重点 var dialogLeft = (maskWidth / 2) - ($('#dialog-box').width() / 2);//重点 $('#dialog-overlay').css({ height : maskHeight, width : maskWidth }).show(); $('#dialog-box').css({ top : dialogTop, left : dialogLeft }).show(); $('#dialog-message').html(message); } </script> </head> <body onload="popup('abc')"> <a href="javascript:popup('abc')">猛击此处,弹出层!</a> <div id="dialog-overlay"></div> <div id="dialog-box"> <div class="dialog-content"> <div id="dialog-message"></div> <a href="#" class="button">关闭</a> </div> </div> </body> </html>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17