/*
@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="width: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{
width: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{
width: 300px;
height: 300px;
padding: 3px;
background: #abcdef;
display: none;
position: absolute;
left: 0;
right: 0;
z-index: 2;
}
.login h3{
width: 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{
width: 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();
}
});
})
