业务需求, 又不想用网上找的。 干脆自己写一个。
// 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);
写法很简单 别的不说 好用就成