popUp 弹出框插件 整站通用

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

[点击下载]

js代码：

/*
author : zhupinglei_zjnb@163.com
desc : popUp.js
data : 2012/7/19
dependon : jquery-1.7.js
verson : 3.0
*/
(function($){
    function _popUp(here,options,index){
        var _this = this;
        _this.$e = $(here);
        _this.opts = options;
        _this.index = index;
        _this.init();
    }
    _popUp.prototype = {
        init : function(){
            var _this = this;
            //弹出框代码
            var code = '<div id="popup_mask"></div>'+
                        '<div id="popup">' +
                            '<h3 class="popup_title"><span>'+_this.opts.title+'</span><i class="closeBtn" title="关闭">X</i></h3>' +
                            '<div class="popup_con">'+_this.opts.content+'</div>' +
                            '<div class="btn"><span class="submitBtn">确定</span><span class="closeBtn">取消</span></div>' +
                        '</div>';
            $('body').append(code);
            if($.browser.msie && ($.browser.version == 6.0)){
                $('#popup_mask').css({'height':$(window).height() + 'px'});
            }
            $('#popup').css({
                'width' : _this.opts.width+'px',
                'height' : _this.opts.height+'px'
            });
            _this.position();
            $(window).resize(function(){
                _this.position();
            });
            _this.event();
        },
        event : function(){
            var _this = this;
            $('#popup').on('click','.submitBtn',function(){
                _this.closePopup();
                _this.opts.callback();
            });
            $('#popup').on('click','.closeBtn',function(){
                _this.closePopup();
            });
        },
        position : function(){
            var showLeft = ( $(window).width() - $('#popup').width() )/2 + 'px',
                showHeight = ( $(window).height() - $('#popup').height() )/2 - 20 + 'px';
            $('#popup').css({
                'left' : showLeft,
                'top' : showHeight
            });
        },
        closePopup : function(){
            $('#popup_mask').remove();
            $('#popup').remove();
        }
    }
    $.fn.popUp = function(options){
        var opts = $.extend({},$.fn.popUp.defaults,options);
        return this.each(function(index){
            this.popUp = new _popUp(this,opts,index);
        });
    }
    $.alert = function(width,title,content){
        var code = '<div id="popup_mask"></div>'+
                    '<div id="popup">' +
                        '<h3 class="popup_title">'+title+'</h3>' +
                        '<div class="popup_con">'+content+'</div>' +
                        '<div class="btn"><span class="submitBtn">确定</span></div>' +
                    '</div>';
        $('body').append(code);
        if($.browser.msie && ($.browser.version == 6.0)){
            $('#popup_mask').css({'height':$(window).height() + 'px'});
        }
        $('#popup').css({'width' : width});
        function position(){
             var showLeft = ( $(window).width() - $('#popup').width() )/2 + 'px',
                showHeight = ( $(window).height() - $('#popup').height() )/2 - 20 + 'px';
            $('#popup').css({
                'left' : showLeft,
                'top' : showHeight
            });
        }
        position();
        $(window).resize(function(){
            position();
        });
       
        $('#popup').on('click','.submitBtn',function(){
            $('#popup_mask').remove();
            $('#popup').remove();
        });
    }
    $.fn.popUp.defaults = {
        width : 200,
        height : 150,
        title : '标题',
        content : '<a href="#1">内容</a>',
        callback : function(){}
    }
})(jQuery);

css:

/**弹出框css**/
 #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;}
 #popup{border:1px solid #99c; position:absolute; left:0; top:0; z-index:9999; background:#fff;}
 #popup h3{padding:10px; border-bottom:1px solid #99c; background: #33c; color:#fff; position:relative;}
 #popup h3 i{display:block; position: absolute; font-style:normal; font-family: '黑体'; font-weight: normal; font-size: 14px; right:10px; top:10px; cursor: pointer;}
 #popup .popup_con{margin:10px;}
 #popup .btn{width:100%; text-align:right; padding:10px 0; position:absolute; bottom:-34px; left:-1px; background: #fff; border:1px solid #99c;}
 #popup .btn span{ padding:5px 10px; background:#99c; color:#fff; cursor:pointer;margin-right:10px; background: #33c;}

用例：

<body>
<div class="button">click me</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
    $.alert('200px','消息框','Are you ready?');
    $('.button').click(function(){
        $(this).popUp({
             width : 400,
             height : 200,
             title : '标题',
             content : '<div class="test">我的内容!</div>',
             callback : function(){
                $.alert('200px','消息框','这是回调函数!');  //宽度，标题，内容
             }
         }); 
    });
 });
</script>

以上~