popUp 弹出框插件整站通用

升级了之前的popUp插件，修复了之前版本的多个性能和兼容问题，本版本兼容IE6-9,firefox,chrome ……

js代码：

  1 /*
  2 author : zhupinglei_zjnb@163.com
  3 desc : popUp.js
  4 data : 2012/7/19
  5 dependon : jquery-1.7.js
  6 verson : 3.0
  7 */
  8 (function($){
  9     function _popUp(here,options,index){
 10         var _this = this;
 11         _this.$e = $(here);
 12         _this.opts = options;
 13         _this.index = index;
 14         _this.init();
 15     }
 16     _popUp.prototype = {
 17         init : function(){
 18             var _this = this;
 19             //弹出框代码
 20             var code = \'<div id="popup_mask"></div>\'+
 21                         \'<div id="popup">\' +
 22                             \'<h3 class="popup_title"><span>\'+_this.opts.title+\'</span><i class="closeBtn" title="关闭">X</i></h3>\' +
 23                             \'<div class="popup_con">\'+_this.opts.content+\'</div>\' +
 24                             \'<div class="btn"><span class="submitBtn">确定</span><span class="closeBtn">取消</span></div>\' +
 25                         \'</div>\';
 26             $(\'body\').append(code);
 27             if($.browser.msie && ($.browser.version == 6.0)){
 28                 $(\'#popup_mask\').css({\'height\':$(window).height() + \'px\'});
 29             }
 30             $(\'#popup\').css({
 31                 \'width\' : _this.opts.width+\'px\',
 32                 \'height\' : _this.opts.height+\'px\'
 33             });
 34             _this.position();
 35             $(window).resize(function(){
 36                 _this.position();
 37             });
 38             _this.event();
 39         },
 40         event : function(){
 41             var _this = this;
 42             $(\'#popup\').on(\'click\',\'.submitBtn\',function(){
 43                 _this.closePopup();
 44                 _this.opts.callback();
 45             });
 46             $(\'#popup\').on(\'click\',\'.closeBtn\',function(){
 47                 _this.closePopup();
 48             });
 49         },
 50         position : function(){
 51             var showLeft = ( $(window).width() - $(\'#popup\').width() )/2 + \'px\',
 52                 showHeight = ( $(window).height() - $(\'#popup\').height() )/2 - 20 + \'px\';
 53             $(\'#popup\').css({
 54                 \'left\' : showLeft,
 55                 \'top\' : showHeight
 56             });
 57         },
 58         closePopup : function(){
 59             $(\'#popup_mask\').remove();
 60             $(\'#popup\').remove();
 61         }
 62     }
 63     $.fn.popUp = function(options){
 64         var opts = $.extend({},$.fn.popUp.defaults,options);
 65         return this.each(function(index){
 66             this.popUp = new _popUp(this,opts,index);
 67         });
 68     }
 69     $.alert = function(width,title,content){
 70         var code = \'<div id="popup_mask"></div>\'+
 71                     \'<div id="popup">\' +
 72                         \'<h3 class="popup_title">\'+title+\'</h3>\' +
 73                         \'<div class="popup_con">\'+content+\'</div>\' +
 74                         \'<div class="btn"><span class="submitBtn">确定</span></div>\' +
 75                     \'</div>\';
 76         $(\'body\').append(code);
 77         if($.browser.msie && ($.browser.version == 6.0)){
 78             $(\'#popup_mask\').css({\'height\':$(window).height() + \'px\'});
 79         }
 80         $(\'#popup\').css({\'width\' : width});
 81         function position(){
 82              var showLeft = ( $(window).width() - $(\'#popup\').width() )/2 + \'px\',
 83                 showHeight = ( $(window).height() - $(\'#popup\').height() )/2 - 20 + \'px\';
 84             $(\'#popup\').css({
 85                 \'left\' : showLeft,
 86                 \'top\' : showHeight
 87             });
 88         }
 89         position();
 90         $(window).resize(function(){
 91             position();
 92         });
 93        
 94         $(\'#popup\').on(\'click\',\'.submitBtn\',function(){
 95             $(\'#popup_mask\').remove();
 96             $(\'#popup\').remove();
 97         });
 98     }
 99     $.fn.popUp.defaults = {
100         width : 200,
101         height : 150,
102         title : \'标题\',
103         content : \'<a href="#1">内容</a>\',
104         callback : function(){}
105     }
106 })(jQuery);

css:

1 /**弹出框css**/
2  #popup_mask{width:100%; height:100%; background:#000; position:absolute; top:0px; left:0px; z-index:10; opacity: 0.3; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3;}
3  #popup{border:1px solid #99c; position:absolute; left:0; top:0; z-index:9999; background:#fff;}
4  #popup h3{padding:10px; border-bottom:1px solid #99c; background: #33c; color:#fff; position:relative;}
5  #popup h3 i{display:block; position: absolute; font-style:normal; font-family: \'黑体\'; font-weight: normal; font-size: 14px; right:10px; top:10px; cursor: pointer;}
6  #popup .popup_con{margin:10px;}
7  #popup .btn{width:100%; text-align:right; padding:10px 0; position:absolute; bottom:-34px; left:-1px; background: #fff; border:1px solid #99c;}
8  #popup .btn span{ padding:5px 10px; background:#99c; color:#fff; cursor:pointer;margin-right:10px; background: #33c;}

用例：

 1 <body>
 2 <div class="button">click me</div>
 3 </body>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6     $.alert(\'200px\',\'消息框\',\'Are you ready?\');
 7     $(\'.button\').click(function(){
 8         $(this).popUp({
 9              width : 400,
10              height : 200,
11              title : \'标题\',
12              content : \'<div class="test">我的内容!</div>\',
13              callback : function(){
14                 $.alert(\'200px\',\'消息框\',\'这是回调函数!\');  //宽度，标题，内容
15              }
16          }); 
17     });
18  });
19 </script>

以上~