Jquery添加掩盖层的插件

浏览数：57 / 时间：2015年06月09日

这是插件的代码

 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 })

View Code

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         }

View Code

这是例子

<!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>