html源代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>popWindow</title> <link rel="stylesheet" href="pop.css"> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="pop.js"></script> </head> <body> <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 /> <a href="javascript:;" id="show">显示窗口</a> <div class="popWindow hide"> <h3>弹出窗口的标题<span>关闭</span></h3> <div class="content">弹出窗口的内容</div> </div> <!-- <div class="mask hide"></div> --> <!-- mask是遮罩层，不过不推荐这种做法 --> </body> </html>
js代码
$(function(){ var oBtn = $('#show'); var popWindow = $('.popWindow'); var oClose = $('.popWindow h3 span'); //获得浏览器可视区域的宽和高 var browserWidth = $(window).width(); var browserHeight = $(window).height(); //获得浏览器纵向滚动条距离上边界的值 var browserScrollTop = $(window).scrollTop(); //获得弹出窗口的宽和高 //outerWidth(true)加参数true可以获得元素的真实宽度，包括padding,margin,border的值 var popWindowWidth = popWindow.outerWidth(true); var popWindowHeight = popWindow.outerHeight(true); //获得弹出窗口的最终位置 var positionLeft = browserWidth/2 - popWindowWidth/2; var positionTop = browserHeight/2 - popWindowHeight/2 + browserScrollTop; var oMask = '<div class="mask"></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; positionTop = browserHeight/2 - popWindowHeight/2 + browserScrollTop; popWindow.animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500).dequeue(); //dequeue执行的时候，执行匹配元素队列的下一个函数，可以理解为直接跳到动画末尾 } }); //浏览器滚动条滚动的时候 $(window).scroll(function() { if(popWindow.is(':visible')){ browserScrollTop = $(window).scrollTop(); positionTop = browserHeight/2 - popWindowHeight/2 + browserScrollTop; popWindow.animate({ 'left':positionLeft+'px', 'top':positionTop+'px' },500).dequeue(); } }); oClose.click(function() { popWindow.hide(); $('.mask').remove(); }); });
css代码
*{ margin: 0; padding: 0; } .hide{display: none;} .popWindow{ width: 300px; height: 300px; background: #abcdef; padding: 2px; position: absolute; left: 0; top: 0; z-index: 2; /*border:2px solid #abcdef;*/ } .popWindow h3{ height: 30px; line-height: 30px; } .popWindow h3 span{ float: right; font-size: 14px; font-weight: normal; } .popWindow h3 span:hover{ color: #f00; cursor: pointer; } .popWindow .content{ height: 270px; background: #fff; } .mask{ background: #000; opacity: 0.4; filter:alpha(opacity=40); position: absolute; left: 0; top:0; z-index: 1; }