/**
* MaskUtil (show Div with mask )
* Version : 1.2
* @author Jay
*/
(function(w){
var MaskUtil = function(){} ,
layer_index = 50 ,
centerDetail = function(selector){
var windowWidth = $(w).width();
var windowHeight = $(w).height();
var showHeight = $(selector).height();
var showWidth = $(selector).width();
$(selector).css({
"position": "fixed",
"top" : windowHeight/2-showHeight/2,
"left" : windowWidth/2-showWidth/2,
"z-index" : layer_index++ +""});
} ;
/**
* show Div with mask
* @param selector div selector
* @param maskIndex primary key of mask
* @return
*/
MaskUtil.prototype.createMaskDiv = function( selector ){
var div = document.createElement("div");
div.style = "background-color:#000000; position:absolute; " +
" display:none; left :0 ; top:0; width:100%; height:1000px;" +
" opacity:0.5 ; filter: alpha(opacity=50) ; -moz-opacity: 0.5;";
div.id = "mk_"+selector.substring(1,selector.length);
if( $("#mk_"+selector.substring(1,selector.length)).length === 0 ){
$('body').prepend(div);
}else{
return;
}
var _$div = $(div);
_$div.css({ "display": "block", "height": $(document).height() , "z-index": layer_index++ +""});
centerDetail(selector);
if( arguments.length===2 && arguments[1]==="center" ){
$(selector).css({ "z-index":layer_index++ +"" });
}else{
$(selector).css({ "top":"30px","z-index":layer_index++ +"" });
}
$(selector).fadeIn("slow");
};
/**
* close Div with mask
* @param selector div selector
* @param maskIndex primary key of mask
* @return
*/
MaskUtil.prototype.closeMaskDiv = function( selector ){
var __mask = $("#mk_"+selector.substring(1,selector.length));
if( __mask.length===0 ){
throw new Error("Mask undefined(check the selector,try to use a simple selector)");
}else{
$(selector).fadeOut("slow");
__mask.remove();
}
};
w.MaskUtil = new MaskUtil() ;
})(window);
使用MaskUtil.createMaskDiv('#showhtmlwarehouse', 'center');
MaskUtil.closeMaskDiv('#showhtmlwarehouse');
target爲div