copy同事寫的遮罩層

/**
 * 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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章