jquery 遮盖层的实现

遮盖层插件代码：

View Code
 //jquey绑定插件
        $.fn.extend({ "showCover": function () {
            //创建透明层
            $div = $("<div class='cover'></div>");
            //设置div的高度、宽度
            var width = $(window).width();
            var height = $(window).height();
            $div.css({ "width": width, "height": height, "top": 0, "left": 0 });
            $("body").append($div);

            //显示层
            var holderWidth = (width - $(".holder").width()) / 2;
            var holderHeight = (height - $(".holder").height()) / 2;
            var $holder = $(this);
            $holder.css({ "display": "block", "top": holderHeight, "left": holderWidth });

            //窗体大小改变时
            $(window).resize(function () {
                $holder.closeCover();
                $holder.showCover();
            });
            return $holder;
        }, "closeCover": function () {
            //取消窗体大小改变事件
            $(window).unbind("resize");
            $(this).hide();
            $(".cover").remove();
        }
        });

样式：

View Code 
    <style type="text/css">
        .holder
        {
            width:300px;
            height:200px;
            background-color:Yellow;
            position:fixed;
            z-index:1000;
            display:none;
        }
        .cover
        {
            background-color:Gray;
            filter:alpha(opacity=50);
            opacity:0.5;
            position:fixed;
        }
    </style>

页面代码：

View Code 
<body>
    <input type="button" id="btn" value="login"/>

    <div class="holder">
        <input type="button" id="btnClose" value="close"/>
    </div>
</body>

js实现：

View Code
posted @ 2013-03-25 13:59  海藻  阅读(457)  评论(0)  编辑  收藏  举报