lightBox灯箱

/**
 * @description 弹出遮盖层，显示灯箱效果。
 * @author shawn
 * * @param {} cfg
 * @date 2012-02-28
 */
function LightBox(cfg){
    jQuery.extend(this,cfg);
    this.init();
}
jQuery.extend(LightBox.prototype,{

    id: 'global_mask',
    ie6Scroll:false,//在IE6下，在默认弹出遮盖层时候，禁用页面滚动。
    target: null,
    browser:null,
    width: 400,
    height:100,
    isWrap:true,
    animate: false,
    html: '',
    src: '',
    loadFn: null,//iframe页面载入的onload函数
    zIndex: 99,
    _html: '', //构造的html
    checkBrowser: function(){
        var browser = {};
        var ua = navigator.userAgent;
        if (/MSIE ([^;]+)/.test(ua)) {
             browser.ver = parseFloat(RegExp['$1']);  
        }
        this.browser = browser;
    },
    initStyle: function(){
        var style = [];
        var s_id = '#' + this.id + ' ';
        if(this.browser.ver && this.browser.ver < 7){
            style.push('* html{background-image:url(about:blank);background-attachment:fixed;}');
        }
        style.push(s_id + '{display:none;z-index:'+this.zIndex+';width:100%;height:100%;}');
        style.push(s_id + '.mask_layer{position:fixed;top:0;left:0;background-color: #000;filter:alpha(opacity=30);opacity:0.3;-moz-opacity:0.3;z-index:10;_position:absolute;}');
        style.push(s_id + '.wrap_layer{position:fixed;_position:absolute;_zoom:1;top:50%;left:50%;z-index:11;background-color: #fff;filter:alpha(opacity=20);opacity:0.2;-moz-opacity:0.2;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;');
        if(this.browser.ver < 7 && this.ie6Scroll){
            style.push('_left:expression(document.documentElement.scrollLeft +(document.documentElement.clientWidth-this.offsetWidth)/2+this.offsetWidth/2);');
            style.push('_top:expression(document.documentElement.scrollTop +(document.documentElement.clientHeight-this.offsetHeight)/2+this.offsetHeight/2);');    
        }
        style.push('}');

        style.push(s_id + '.mask_box{position:fixed;_position:absolute;top:50%;left:50%;z-index:20;background-color:#fff;');
        if(this.browser.ver < 7 && this.ie6Scroll){
            style.push('_left:expression(document.documentElement.scrollLeft +(document.documentElement.clientWidth-this.offsetWidth)/2+this.offsetWidth/2);');
            style.push('_top:expression(document.documentElement.scrollTop +(document.documentElement.clientHeight-this.offsetHeight)/2+this.offsetHeight/2);');    
        }
        style.push('}');
        style.push(s_id + '.mask_box .box_header{position:relative;overflow:hidden;padding:10px 0;background-color:#0099CC;color:#fff;}');
        style.push(s_id + '.mask_box .box_header a{position:absolute;top:5px;right:3px;display:block;font-weight:bold;width:20px;height:20px;overflow:hidden;color:#f00;text-decoration:none;}');
        style.push(s_id + '.mask_box .box_header a:hover{text-decoration:none;}');
        style.push(s_id + '.mask_box .box_header h2{font-weight:bold;font-size:14px;margin:-5px 0;padding:0;}');
        style.push(s_id + 'iframe.sel_hack_iframe{position:absolute;display:block;top:0;left:0;width:100%;height:1%;z-index:1;border:0;filter:alpha(opacity=0);}');

        this._style = style.join('');
    },
    addStyle: function(){
        var id = 'st_'+ this.id;
        if (!this.browser.ver) {  
            var style = document.createElement('style');  
            style.setAttribute("id", id);
            style.setAttribute("type", "text/css");
            style.setAttribute("media", "screen");
            var text = document.createTextNode(this._style);
            style.appendChild(text);
            document.getElementsByTagName('head')[0].appendChild(style);       
        }  
        else { /* IE */  
            var ss = document.createStyleSheet();  
			ss.owningElement.id = id;  
            ss.owningElement.type = 'text/css';
            ss.owningElement.media = 'screen';
			ss.cssText = this._style;
        } 
        this._style = null;
    },
    initCfg:function(){
        if(this.randomId === true){
            this.id = 'lb_'+new Date().getTime();
        }
    },
    init: function(){
        this.checkBrowser();
        this.initCfg();
        this.initStyle();
        this.addStyle();
    },
    getDocSize:function(){
        return [Math.max(document.body.scrollWidth,window.screen.availWidth),
                Math.max(document.body.scrollHeight,window.screen.availHeight)];

    },
    hideSelect:function(){
        //隐藏select元素
        jQuery("select").css('visibility','hidden');
        jQuery("#" + this.id +" select").css('visibility','visible');
    },
    createContainer: function(){
        this._html = '<div id="' + this.id + '">' + this._html + '</div>';
    },
    createBox: function(){
        this.createContent();
        this.createHeader();
        var maskBoxStyle = 'display:none;width:'+this.width+'px;height:'+this.height+'px;'+
                        'margin:-' + this.height/2 + 'px 0 0 -' + this.width/2 + 'px;';
        this._html = '<div class="mask_box" style="'+maskBoxStyle +'">' + this._html + '</div>';
    },
    createMaskLayer: function(){
        var content = '';
        if(this.browser.ver && this.browser.ver < 7){
            content = '<div class="mask_layer"><iframe class="sel_hack_iframe" frameborder="0" src="about:blank"></iframe></div>';
        }else{
            content = '<div class="mask_layer"></div>';
        }
        //半透明外围
        if(this.isWrap === true){
            var style = 'width:'+(this.width+20) +'px;height:'+(this.height+20)+'px;margin:-' + (this.height+20)/2 + 'px 0 0 -' + (this.width+20)/2 + 'px;';
            content += '<div class="wrap_layer" style="'+ style+'"></div>';
        }

        this._html = content + this._html;
    },
    createHeader: function(){
        var content = '<div class="box_header">';
        content += '<a class="box_close" href="javascript:;" title="关闭">×</a>';
        if(this.title){
            content += '<h2>'+ this.title +'</h2>';
        }
        content += '</div>';
        this._html = content + this._html;
    },
    createContent: function(){
        var content = '';
        if(this.src){
            content = '<iframe  src="'+this.src+'" class="con_iframe" scrolling="no" frameborder="0" style="width:'+this.width+'px;height:'+this.height+'px" ';
            if(typeof this.loadFn == 'function'){
                content += ' onload="javascript:(' + this.loadFn + ')();" ';
            }
            content += ' />';
        }else{
            content = this.html;
        }
        this._html = content;
    },
    createDom: function(){
        //内容区
        this.createBox();
        //遮盖层
        this.createMaskLayer();
        //最后调用
        this.createContainer();
    },
    render: function(){
        this.createDom();
        jQuery("body:eq(0)").append(this._html);
        this.target = jQuery("#" + this.id);

        this.bindEvents();
        this._html = null;
    },
    bindEvents: function(){
        var that = this;
        this.target.find('a.box_close').click(function(){
	        that.unMask();
        });

    },
    showContent : function(firstShow) {
        var that=this;
		if (this.animate) {
			this.target.find('.mask_box').slideDown('normal', function() {
                that.target.find('.mask_box').show();
				if (!firstShow && that.src) {
					// 强制重新加载页面,会重新触发onload事件
					that.target.find('iframe.con_iframe').attr('src', this.src);
				}
			});
		} else {
			this.target.find('.mask_box').show();
			if (!firstShow && this.src) {
				this.target.find('iframe.con_iframe').attr('src', this.src);
			}
		}
	},
    hideContent : function() {
        var that=this;
		if (this.animate) {
			this.target.find('.mask_box').slideUp('normal', function() {
						that.target.hide();
					});
		} else {
			that.target.hide();
		}
	},

    mask: function(){
        var firstShow = false;
        if(!this.target){
            this.render();
            firstShow = true;
        }
        var size = this.getDocSize();
        if(this.browser.ver && this.browser.ver < 7){
            if(this.ie6Scroll){
                this.hideSelect();
            }else{
                 document.documentElement.style.overflow = 'hidden';
            }
            this.target.show().find('.mask_layer').css({width:size[0], height:size[1]});
            this.target.find('iframe.sel_hack_iframe').css({width:"100%", height:size[1]});
            this.showContent(firstShow);

        }else{
            this.target.show().find('.mask_layer').css({width:size[0], height:size[1]});
            this.showContent(firstShow);
        }

    },
    unMask: function(){
        if(this.target){
            if(typeof this.beforeCloseFn == 'function'){
                var rnt = this.beforeCloseFn();
                if(rnt === false){
                    return;
                }
            }
            this.hideContent();
            this.target.find('iframe.con_iframe').attr('src','');
	        if(this.browser.ver && this.browser.ver < 7){
	            if(this.ie6Scroll){
	                jQuery("select").css('visibility','visible');
	            }else{
	                 document.documentElement.style.overflow = 'auto';
	            }

	        }
        }
    }
});

//使用示例：
var cfg = {
                id:'my_light_box',
                width:400,
                height:150,
                html: '什么到底3'
                ,title:'这是标题32'
                ,ie6Scroll:true
                ,animate:true
                ,isWrap:true
                ,zIndex:999
//                ,src:"http://www.baidu.com"
//                ,loadFn: function(){alert(331);}
//                ,beforeCloseFn: function(){alert('before');}
                };
            window.lightBox = new LightBox(cfg);
        }
        window.lightBox.mask();