jQuery 遮罩层效果

 

最精简，最强大的 jQuery 遮罩层效果。
1. 当浏览器改变大小时，遮罩层的大小会相应地改变。
2. 遮罩层上方的对话框可随 scroll 的改变而改变，即对话框居中显示。

HTML Code：

查看源代码

打印 帮助

1	<div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div>

2	<!-- jQuery 遮罩层 -->

3	<div id="fullbg"></div>

4	<!-- end jQuery 遮罩层 -->

5	<!-- 对话框 -->

6	<div id="dialog">

7	<p class="close"><a href="#" onclick="closeBg();">关闭</a></p>

8	<p>正在加载，请稍后...</p>

9

</div>

10	<!-- jQuery 遮罩层上方的对话框 -->

CSS Code：

查看源代码

打印 帮助

1	<style type="text/css">

2

body {

3	font-family:Arial, Helvetica, sans-serif;

4	font-size:12px;

5

margin:0;

6

}

7

#main {

8	height:1800px;

9	padding-top:90px;

10	text-align:center;

11

}

12

#fullbg {

13	background-color:Gray;

14

left:0px;

15	opacity:0.5;

16	position:absolute;

17

top:0px;

18	z-index:3;

19	filter:alpha(opacity=50); /* IE6 */

20	-moz-opacity:0.5; /* Mozilla */

21	-khtml-opacity:0.5; /* Safari */

22

}

23

#dialog {

24	background-color:#FFF;

25	border:1px solid #888;

26	display:none;

27	height:200px;

28

left:50%;

29	margin:-100px 0 0 -100px;

30	padding:12px;

31	position:fixed !important; /* 浮动对话框 */

32	position:absolute;

33

top:50%;

34	width:200px;

35	z-index:5;

36

}

37	#dialog p {

38	margin:0 0 12px;

39

}

40	#dialog p.close {

41	text-align:right;

42

}

43

</style>

jQuery Code：

查看源代码

打印 帮助

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

2	<script type="text/javascript">

3	//显示灰色 jQuery 遮罩层

4	function showBg() {

5	var bh = $("body").height();

6	var bw = $("body").width();

7	$("#fullbg").css({

8	height:bh,

9

width:bw,

10	display:"block"

11

});

12	$("#dialog").show();

13

}

14	//关闭灰色 jQuery 遮罩

15	function closeBg() {

16	$("#fullbg,#dialog").hide();

17

}

18

</script>

19	<!--[if lte IE 6]>

20	<script type="text/javascript">

21

// 浮动对话框

22	$(document).ready(function() {

23	var domThis = $('#dialog')[0];

24	var wh = $(window).height() / 2;

25	$("body").css({

26	"background-image": "url(about:blank)",

27	"background-attachment": "fixed"

28

});

29	domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');

30

});

31

</script>

32	<![endif]-->

注意：请将遮罩层的 DIV 放置于 HTML 文档最后 </body> 标签之前，否则遮罩层将无法获取当前浏览器窗口的高度。