遮盖层插件代码：
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