jQuery插件之：对话框
今天下午写了个弹出对话框的jQuery插件，点击下载，特记之
一、Html
1 <div class="button">click me</div>
2 <a href="#" class="con">内容</a>
二、css
1 /**弹出框css**/
2 #popup_mask{width:100%; height:100%; background:#666; position:absolute; top:0px; left:0px; z-index:10; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity: 0.5; display:none;}
3 #popup{border:1px solid #eee; position:absolute; z-index:9999; background:#fff; box-shadow:0px 0px 5px #333; -moz-box-shadow:0px 0px 5px #333; -webkit-box-shadow:0px 0px 5px #333; -khtml-box-shadow:0px 0px 5px #333; display:none;}
4 h3{padding:10px 15px; border-bottom:1px solid #ccc;}
5 .popup_con{margin:15px 15px;}
6 .btn{border-top:1px solid #ccc;}
7 .btn span{ padding:5px 10px; background:#999; color:#fff; margin:8px 10px 8px 0px; float:right; cursor:pointer;}
8
9 /**页面css**/
10 .button{margin:0 auto; margin-top:20px; background:#000; padding:10px 20px; color:#fff; text-align:center; cursor:pointer;}
11 a.con{display:none;}
三、插件代码
1 //popUp插件代码
2 (function(){
3 $.fn.popUp = function(options){
4 var _this = $(this)
5 //初始默认属性设置
6 var defaults = {
7 width : 300,
8 height : 150,
9 mask : true, //是否有遮罩层
10 maskClick : true, //点击遮罩层是否隐藏
11 submitBtn : true, //是否设置提交按扭
12 closeBtn : true, //是否设置关闭按扭
13 title : '弹出框'
14 }
15 //用户传参和默认参数合并
16 var opts = $.extend(defaults,options);
17
18 //弹出框代码
19 var bg = '<div id="popup_mask"></div>';
20 var code = '<div id="popup">' +
21 '<h3 class="popup_title"></h3>' +
22 '<div class="popup_con"></div>' +
23 '<div class="btn"></div>' +
24 '</div>';
25 var subBtn = '<span class="submitBtn">确定</span>',
26 cloBtn = '<span class="closeBtn">取消</span>';
27 //显示弹出框
28 if(opts.mask){
29 $("body").append(bg);
30 }
31 $("body").append(code);
32 if(opts.maskClick){
33 //点击mask消失
34 $("#popup_mask").click(function(){
35 $("#popup").hide();
36 $(this).hide();
37 $("div.btn").html("");
38 });
39 }
40
41 //插入按扭
42 if(opts.closeBtn){
43 $("div.btn").append(cloBtn);
44 }
45 if(opts.submitBtn){
46 $("div.btn").append(subBtn);
47 }
48
49 //设置用户参数
50 $(".popup_con").css({"width" : opts.width + "px"});
51 $(".popup_con").css({"height" : opts.height + "px"});
52 $("h3.popup_title").html(opts.title);
53 $("#popup").find("div.popup_con").html(_this);
54
55 //居中
56 var showLeft = ($(window).width() - opts.width)/2,
57 showTop = ($(window).height() - opts.height)/2;
58 $("#popup").css({
59 left : showLeft,
60 top : showTop
61 });
62
63 //显示
64 $("#popup_mask").show();
65 $("#popup").show();
66 _this.show();
67
68 //点按扭关闭对话框
69 $("div.btn span").click(function(){
70 $("#popup").hide();
71 $("#popup_mask").hide();
72 $("div.btn").html("");
73 });
74 }
75 })(jQuery);
四、调用
1 $(document).ready(function(){
2 $("div").click(function(){
3 $("a.con").popUp({
4 width : 400,
5 height : 200,
6 mask : true,
7 maskClick : true,
8 submitBtn : true,
9 closeBtn : false
10 });
11 });
12 });
五、小记
自己会写插件也没多少时间，能常常练个手还是不错的
