jquery 实现弹出 做登入
如题 我想做一个弹出层里面做一些登入啊 提示啊 等等的东西,但是如何让 这个弹出层 不会因为滚动上下被遮盖呢。 不管我页面怎么滚动 始终保持在中间位置。
最好有完整代码啊 谢谢大家啦。。。。
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnShow").click(function() {
$("#BgDiv").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
$("#DialogDiv").css({ top: yscroll + 100 });
$("#DialogDiv").css("display", "block");
document.documentElement.scrollTop = 0;
});
$("#btnClose").click(function() {
$("#BgDiv").css("display", "none");
$("#DialogDiv").css("display", "none");
});
});
</script>
<style type="text/css">
body, h2
{
margin: 0;
padding: 0;
}
#BgDiv
{
background-color: #e3e3e3;
position: absolute;
z-index: 99;
left: 0;
top: 0;
display: none;
width: 100%;
height: 1000px;
opacity: 0.8;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
#DialogDiv
{
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
height: auto;
z-index: 100;
background-color: #fff;
border: 1px #8FA4F5 solid;
padding: 1px;
}
#DialogDiv h2
{
height: 25px;
font-size: 14px;
background-color: #8FA4F5;
position: relative;
padding-left: 10px;
line-height: 25px;
}
#DialogDiv h2 a
{
position: absolute;
right: 5px;
font-size: 12px;
color: #000000;
}
#DialogDiv .form
{
padding: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="BgDiv"></div>
<div id="DialogDiv" style="display: none">
<h2>
弹出层<a href="#" id="btnClose">关闭</a></h2>
<div class="form">
弹出对话框!!<br />
</div>
</div>
<p>
</p>
<p align="center">
<input value="弹出" class="but" type="button" id="btnShow" />
</p>
<div id="div2" style="width:300px; height:200px; background-color:Red;" >
hello word!
</div>
<div style="width:300px; height:200px; background-color:Red;" >
hello word!
</div>
<div style="width:300px; height:200px; background-color:Red;" >
hello word!
</div>
<div style="width:300px; height:200px; background-color:Red;" >
hello word!
</div>
<div style="width:300px; height:200px; background-color:Red;" >
hello word!
</div>
</form>
</body>