/* @author:luowen @time:2013-08-10 @desc:点击登入,在页面中心出现一个登入框,并形成遮罩层 <!-- html code --> <!doctype html> <html> <head> <meta charset='utf-8'> <title></title> <link rel="stylesheet" type="text/css" href="pop.css"> <script type="text/javascript" src="../Jquery.js"></script> <script type="text/javascript" src='pop.js'></script> </head> <body style="3000px;height:3000px;"> <a href="javascript:;" id="show">登入</a> <div class="login"> <h3>用户登入<span>关闭</span></h3> <div class="cont"> 内容部分 </div> </div> <div class="mask"></div> </body> </html> *{ margin: 0; padding: 0; } #show{ 100%; height:30px; padding-left: 100px; background: #000; opacity: .6; font:normal 16px '黑体'; line-height: 30px; display: block; color: white; border-bottom: 2px solid red; position: fixed; box-shadow: 0px 2px 10px #999; } .login{ 300px; height: 300px; padding: 3px; background: #abcdef; display: none; position: absolute; left: 0; right: 0; z-index: 2; } .login h3{ 300px; height: 30px; font-family: '微软雅黑'; background: #abcdef; line-height: 30px; } .login h3 span{ float: right; margin-right: 5px; font-size: 14px; cursor: pointer; } .login h3 span:hover{ color:red; } .cont{ 300px; height: 270px; background: #fff; } .cont input{ margin: 5px 0; border: 1px solid #ccc; } .mask{ background: #000; opacity: .6; position: absolute; left: 0; top: 0; display: none; z-index: 1; } <!-- js code --> $(function(){ var login = $('.login'); //动态获取文档高宽 var documentW = $(document).width(); var documentH = $(document).height(); function getPos(){ //浏览器宽度 var bw = $(window).width(); //浏览器高度 var bh = $(window).height(); //获取纵向滚动条的高度 var scrollH = $(window).scrollTop(); //获取横向滚动条 var scrollL = $(window).scrollLeft(); //登入框宽度 var loginW = login.outerWidth(true); //登入框高度 var loginH = login.outerHeight(true); //定位到中间 var posW = bw/2 - loginW/2 + scrollL; var posH = bh/2 - loginH/2 + scrollH; var res = [posW,posH]; return res; } $('#show').click(function(){ //出来遮罩层 var arr = getPos(); $('.mask').width(documentW).height(documentH).show(); //弹出登入框 login.show().css({'left':arr[0],'top':arr[1]}); //点击关闭 $('.login h3 span').click(function(){ login.hide(); $('.mask').hide(); }); }); $(window).resize(function(){ if(login.is(':visible')){ var arr = getPos(); login.animate({'left':arr[0],'top':arr[1]},100).dequeue(); } }); $(window).scroll(function(){ if(login.is(':visible')){ var arr = getPos(); login.animate({'left':arr[0],'top':arr[1]},100).dequeue(); } }); })