自定義遮罩層

業務需求， 又不想用網上找的。  乾脆自己寫一個。

// obj 中的參數可以自定義。 
var app_mask = {
	init: function(obj,fun) {
		var z_index = obj.z_index;
		if(z_index == undefined)
			z_index = 20;
		var b = $('body script')
		var c = b.first();
		var mask =
			'<div onClick="app_mask.hide(this,' + fun +
			')" style="background-color: #000000;opacity: 0.7;position: fixed;top: 0;left: 0;z-index: '+z_index+';height: 100%;width: 100%;"></div>';
		c.before(mask)
	},
	hide: function(e, fun) {
		$(e).remove();
		if (typeof(fun) == 'function') {
			fun();
		}
	}
}

在需要的地方調用就可以了

app_mask.init({}, function() {
		// 遮罩層 隱藏時的回調
	})

 

第二種, 在第一種的基礎上, 做了一些優化. 以插件的形式給外部調用,(雖然我覺得都行...)

增加了  可設置 點擊層是否隱藏.

 

;
(function() {
	var params = {
		z_index: 20,
		hide: true,
		opacity: 0.5
	};
	var b = $('body script')
	var c = b.first();
	var num = Math.random(10) * 100;
	var app_mask = function(obj, fun) {
		if (typeof(obj) == 'object') {
			if (obj.hide != undefined) {
				params.hide = obj.hide;
			}
			if (obj.z_index != undefined) {
				params.z_index = obj.z_index;
			}
			if (obj.opacity != undefined) {
				params.opacity = obj.opacity;
			}
		}
		init(fun);
		return 'mask_' + parseInt(num);
	}
	var init = function(fun) {
		$('.app_mask').remove();
		var mask =
			'<div class="app_mask" id="mask_' + parseInt(num) + '" onClick="appMaskHide(this,' + fun +
			')" style="background-color: #000000;opacity: ' + params.opacity + ';position: fixed;top: 0;left: 0;z-index: ' +
			params.z_index +
			';height: 100%;width: 100%;"></div>';
		c.before(mask)
	}

	var hide = function(e, fun) {
		if (params.hide == false)
			return;
		if (typeof(e) != 'object')
			$('#' + e).remove();
		else
			$(e).remove();
		if (typeof(fun) == 'function') {
			fun();
		}
	}
	window.appMask = app_mask;
	window.appMaskHide = hide;
}(window))

調用如下

// 初始化
var mask =new appMask({
	hide: false
}, 
function() {
    // 這裡是點擊隱藏的回調
})


// 隱藏

appMaskHide(mask);

 

寫法很簡單  別的不說  好用就成