/**
* @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();
