自己写的遮罩层效果
2012-08-15 18:09 C#与.NET探索者 阅读(324) 评论(0) 编辑 收藏 举报<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="遮罩层.aspx.cs" Inherits="JQUERY练习.遮罩层" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" >
<head
runat="server">
<title></title>
<script
src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#divtest").click(function(e)
{
e.preventDefault();
var div =
$("#top");
//获取弹出层的宽和高
divwidth =
div.width();
divheight =
div.height();
//获取文档的宽度和高度
var
docwidth = $(document).width();
var docheight =
$(document).height();
var clientwidth, clientheight,
scrolltop, scrollleft;
//获取当前窗口的宽和高
clientwidth =
$(window).width();
clientheight =
$(window).height();
div.show();
div.css({ "left": (clientwidth - divwidth) /
2, "top": (clientheight - divheight) / 2 });
$("#bottom").show().css({ "width": docwidth, "height": docheight
});
//当改变窗口大小的时候
$(window).resize(function() {
clientheight =
$(window).height();
clientwidth =
$(window).width();
div.css({ "left": (clientwidth -
divwidth) / 2, "top": (clientheight - divheight) / 2
});
$("#bottom").show().css({ "width": docwidth,
"height": docheight });
});
//当滚动滚动条时
$(window).scroll(function()
{
//获取滚动条的scrolltop和scrollleft
scrollleft =
$(document).scrollLeft();
scrolltop =
$(document).scrollTop();
//获取当前窗口的大小
clientheight =
$(window).height();
clientwidth =
$(window).width();
div.css({ "left": (clientwidth -
divwidth) / 2 + scrollleft, "top": (clientheight - divheight) / 2 + scrolltop
});
$("#bottom").css({ "width": docwidth, "height":
docheight });
});
});
$("#top input").click(function()
{
$("#top,#bottom").css("display",
"none");
});
});
</script>
<style>
#top{width:400px;height:200px;background-color:White;position:absolute;z-index:500;display:none;}
#bottom{width:100%;height:100%;top:0;left:0;background-color:#cccccc;position:absolute;z-index:499;display:none;opacity:0.5;}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div id="divtest">点击我<a href="http://www.baidu.com">百度</a></div><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 />
<p></p>
<div id="bottom"></div>
<div
id="top">这是弹出窗口<input type="button" value="关闭" /></div>
</form>
</body>
</html>
