首页 > 代码库 > Jquery添加掩盖层的插件

Jquery添加掩盖层的插件

2024-07-14 09:17:25   227人阅读

这是插件的代码

 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         .cover12         {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=http://www.mamicode.com/"mycover.css" rel="stylesheet" type="text/css" />    <script src=http://www.mamicode.com/"jquery-1.4.1.js" type="text/javascript"></script>    <script src=http://www.mamicode.com/"mycover.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#wtest").showCover().css("background-color", "blue");            $(":button[value=http://www.mamicode.com/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>
View Code

 


联系
我们