jQuery遮罩层小插件

CSS：

<style type="text/css">
body,html{padding:0;margin:0;}
.overlayer{background: #000;opacity: 0.5;filter:alpha(opacity=50);position: fixed;top: 0;left: 0;z-index: 1;}
.dialog{position: absolute;width: 300px;height: 300px;left: 50%;top:50%;margin-left: -150px;margin-top: -150px;z-index: 2;
border:1px solid #9bdf70; background:#f0fbeb;border-radius: 8px;}
.dialog img{margin: 30px auto 0;display: block;border: 5px solid #fff000;}
.dialog .close{position: absolute;top: 10px;right: 10px;width: 50px;height: 16px;font-size: 14px;color: #000;border:1px solid #ffcc00; background:#fffff7;border-radius: 3px;text-align: center;cursor: pointer;}
.dialog a{color: #000;font-size: 12px;display: block;text-align: center;margin: 10px auto;padding:3px;text-decoration: none;}
</style>

HTML:

<input type="button" value="弹层" id="btn" />
<div id="dialog" class="dialog" style="display:none;">
　　<div id="close" class="close">X</div>
　　<img src="me.jpg" alt="" width="145" height="200" />
　　<a href="javascript:;">显哥哥，亲一个`(*∩_∩*)′</a>
</div>

<input type="button" value="弹层1" id="btn1" />
<div id="dialog1" class="dialog" style="display:none;">
　　<div id="close1" class="close">X</div>
　　<img src="me.jpg" alt="" width="145" height="200" />
　　<a href="javascript:;">宝贝，亲一个`(*∩_∩*)′</a>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.overlay.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.overlay();
$.overlay({
$clickId : $("#btn1"),
$contentId : $("#dialog1"),
$closeId : $("#close1")
});
});
</script>

jquery.overlay.js：

/*
*Author: 楚玉
*Date: 2013.06.10
*for: personnal
*/
;(function($){
　　$.overlay = function(param){

　　/*clickId 
　　**contentId 
　　**closeId
　　*/

　　/*默认参数*/

　　$.overlay.defaults = {
　　　　$clickId : $("#btn"),
　　　　$contentId : $("#dialog"),
　　　　$closeId : $("#close")
　　};

　　var opts = $.extend({},$.overlay.defaults,param),
　　　　clickEle = opts.$clickId,
　　　　contentEle = opts.$contentId,
　　　　closeEle = opts.$closeId;

　　//点击触发
　　clickEle.bind("click",function(){
　　　　showDialog();
　　　　showLayer();
　　});

　　//关闭按钮
　　closeEle.bind("click",function(){
　　　　removeOverlay();
　　　　contentEle.hide();
　　});

　　$(window).resize(function(){
　　　　sizeLayer("overlay");
　　});

　　function showDialog(){
　　　　contentEle.css("display","block");
　　}

　　function showLayer(){
　　　　var overlay = $("<div id='overlayer' class='overlayer'></div>");
　　　　$("body").append(overlay);
　　　　sizeLayer("overlayer");
　　}

　　function sizeLayer(id){
　　　　var _width = $(document).width(),
　　　　　　_height = $(document).height();
　　　　$("#" + id).css({"width":_width,"height":_height});
　　}

　　function removeOverlay(){
　　　　$("#overlayer").remove();
　　}

}
})(jQuery)

　　

　　注意点：

　　一：

　　　　var opts = $.extend({},$.overlay.defaults,param),是继承的一种方式，在jQuery插件中普遍被使用。(js中有原型继承，call,apply继承)。

　　二：

　　　　$.overlay.defaults必须写在前面，否则undefined。

　　三：

　　　　还有var a = 1, b = 2;中间使用逗号相隔，知识是知道的。通常写的时候不注意就错了，还要慢慢看。昨天那个if()判断==写成了=赋值 0.0