这是插件的代码
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 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; 300px; height:300px;"> hahaaaaaaaaaa </div> </body> </html>