这是插件的代码
1 $.fn.extend({ "showCover": function () {
2 //遮盖层 半透明的层
3 var $div = $("<div class=‘cover‘></div>");
4 $("body").append($div);
5 //获取窗口的宽度和高度
6 var width = $(window).width();
7 //获得文档的高度
8 var height = $(window).height();
9 //
10 $div.css({ "width": width, "height": height, "top": 0, "left": 0 });
11
12 //登陆层
13 var $holder = $(this);
14 //计算登陆层的坐标
15 var x = (width - $holder.width()) / 2;
16 var y = ($(window).height() - $holder.height()) / 2;
17
18 $holder.css({ "top": y, "left": x, "display": "block" });
19
20 //
21 $(window).resize(function () {
22 $holder.closeCover();
23 $holder.showCover();
24 })
25 return $holder;
26 }, "closeCover": function () {
27 $(window).unbind("resize");
28 if ($(".cover").length > 0) {
29 //移除遮盖层
30 $(".cover").remove();
31 }
32 //隐藏登陆层
33 $(this).hide();
34 return $(this);
35 }
36 })
CSS的代码
1 .holder
2 {
3 width:300px;
4 height:200px;
5 background-color:Red;
6 position:fixed;
7 display:none;
8 z-index:100;
9 }
10
11 .cover
12 {
13 background-color:Yellow;
14 filter:alpha(opacity=50);
15 opacity:0.5;
16 position:fixed;
17
18 }
这是例子
<!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>
<title></title>
<link href="mycover.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script src="mycover.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#wtest").showCover().css("background-color", "blue");
$(":button[value=close]").click(function () {
$(".holder").closeCover();
})
})
</script>
</head>
<body>
<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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="wtest" style=" position:fixed; width:300px; height:300px;">
hahaaaaaaaaaa
</div>
</body>
</html>
Jquery添加掩盖层的插件
时间： 2025-01-01 04:11:21