自定义遮罩层

╰半橙微兮° 2022-01-27 18:09 474阅读 0赞

业务需求， 又不想用网上找的。 干脆自己写一个。

  1. // obj 中的参数可以自定义。 
  2. var app_mask = {
  3.     init: function(obj,fun) {
  4.         var z_index = obj.z_index;
  5.         if(z_index == undefined)
  6.             z_index = 20;
  7.         var b = $('body script')
  8.         var c = b.first();
  9.         var mask =
  10.             '<div onClick="app_mask.hide(this,' + fun +
  11.             ')" style="background-color: #000000;opacity: 0.7;position: fixed;top: 0;left: 0;z-index: '+z_index+';height: 100%;width: 100%;"></div>';
  12.         c.before(mask)
  13.     },
  14.     hide: function(e, fun) {
  15.         $(e).remove();
  16.         if (typeof(fun) == 'function') {
  17.             fun();
  18.         }
  19.     }
  20. }

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

  1. app_mask.init({}, function() {
  2.         // 遮罩层 隐藏时的回调
  3.     })

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

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

  1. ;
  2. (function() {
  3.     var params = {
  4.         z_index: 20,
  5.         hide: true,
  6.         opacity: 0.5
  7.     };
  8.     var b = $('body script')
  9.     var c = b.first();
  10.     var num = Math.random(10) * 100;
  11.     var app_mask = function(obj, fun) {
  12.         if (typeof(obj) == 'object') {
  13.             if (obj.hide != undefined) {
  14.                 params.hide = obj.hide;
  15.             }
  16.             if (obj.z_index != undefined) {
  17.                 params.z_index = obj.z_index;
  18.             }
  19.             if (obj.opacity != undefined) {
  20.                 params.opacity = obj.opacity;
  21.             }
  22.         }
  23.         init(fun);
  24.         return 'mask_' + parseInt(num);
  25.     }
  26.     var init = function(fun) {
  27.         $('.app_mask').remove();
  28.         var mask =
  29.             '<div class="app_mask" id="mask_' + parseInt(num) + '" onClick="appMaskHide(this,' + fun +
  30.             ')" style="background-color: #000000;opacity: ' + params.opacity + ';position: fixed;top: 0;left: 0;z-index: ' +
  31.             params.z_index +
  32.             ';height: 100%;width: 100%;"></div>';
  33.         c.before(mask)
  34.     }
  36.     var hide = function(e, fun) {
  37.         if (params.hide == false)
  38.             return;
  39.         if (typeof(e) != 'object')
  40.             $('#' + e).remove();
  41.         else
  42.             $(e).remove();
  43.         if (typeof(fun) == 'function') {
  44.             fun();
  45.         }
  46.     }
  47.     window.appMask = app_mask;
  48.     window.appMaskHide = hide;
  49. }(window))

調用如下

  1. // 初始化
  2. var mask =new appMask({
  3.     hide: false
  4. }, 
  5. function() {
  6.     // 這裡是點擊隱藏的回調
  7. })
  10. // 隱藏
  12. appMaskHide(mask);

写法很简单 别的不说 好用就成

发表评论

表情：
评论列表 （有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读