<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none; } .popWindow{ width: 300px; height: 300px; background: #abcdef; padding: 2px; margin: 10px; position: absolute; left: 0; top: 0; z-index: 2; } .popWindow h3{ height: 30px; line-height: 30px; } .popWindow h3 span{ float: right; font-size: 14px; font-weight: normal; cursor: pointer; } .popWindow h3 span:hover{ color: #f00; } .popWindow .content{ height: 270px; background: #fff; } .mask{ background: #000; opacity: 0.4; position: absolute; left: 0; top: 0; z-index: 1; } </style> </head> <body> <a href="javascript:;">显示窗口</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div> <h3>弹出窗口的标题<span>关闭</span></h3> <div>弹出窗口的内容</div> </div> <script src="https://www.jb51.net/jquery-1.7.2.min.js"></script> <script> $(function(){ var oBtn = $('#show'); var popWindow = $('.popWindow'); var oClose = $('.popWindow h3 span'); //浏览器可视区域的宽度 var browserWidth = $(window).width(); //浏览器可视区域的高度 var browserHeight = $(window).height(); //浏览器纵向滚动条距离上边界的值 var browserScrollTop = $(window).scrollTop(); //浏览器横向滚动条距离左边界的值 var browserScrollLeft = $(window).scrollLeft(); //弹出窗口的宽度 var popWindowWidth = popWindow.outerWidth(true); //弹出窗口的高度 var popWindowHeight = popWindow.outerHeight(true); //left的值＝浏览器可视区域的宽度／2－弹出窗口的宽度／2+浏览器横向滚动条距离左边界的值 var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft; //top的值＝浏览器可视区域的高度／2－弹出窗口的高度／2+浏览器纵向滚动条距离上边界的值 var positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop; var oMask = '<div></div>' //遮照层的宽度 var maskWidth = $(document).width(); //遮照层的高度 var maskHeight = $(document).height(); oBtn.click(function(){ popWindow.show().animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500); $('body').append(oMask); $('.mask').width(maskWidth).height(maskHeight); }); $(window).resize(function(){ if(popWindow.is(':visible')){ browserWidth = $(window).width(); browserHeight = $(window).height(); positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft; positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop; popWindow.animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500); } }); $(window).scroll(function(){ if(popWindow.is(':visible')){ browserScrollTop = $(window).scrollTop(); browserScrollLeft = $(window).scrollLeft(); positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft; positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop; popWindow.animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500).dequeue(); } }); oClose.click(function(){ popWindow.hide(); $('.mask').remove(); }); }); </script> </body> </html>
运行效果图如下：
