Commonly used front-end skills finishing-pop-up plugin (2)

Pop-up plugin

Preface: The purpose of writing this plug-in is mainly to facilitate its own use in the project, because the demand side of our company project rarely allows the use of third-party plug-ins. All plug-ins are required to be written by themselves, and other CDN resources are not allowed, so generally we write plug-ins by ourselves.

Simple call plugin

Open the pop-up window:

function popShow(id) {
    popHide();
    $('body').addClass('overflow')
    var p = $('#'+id);
    popDom = p;
    if (p) {
        setTimeout(function(){
            (id=='popYuyue') && g.loadJyPlus() //加载极验
            var css = {
                position: 'fixed',
                top: '50%',
                left: '50%',
                marginTop: -popDom.height() / 2 + 'px',
                marginLeft: -popDom.width() / 2 + 'px',
                opacity:1,
                zIndex: 998
            };
            if(id=='popRulesInfo'){
                css = {
                    position: 'fixed',
                    bottom: 0,
                    left: '50%',
                    marginLeft: -popDom.width() / 2 + 'px',
                    opacity:1,
                    zIndex: 998
                }
            }
            p.fadeIn(200).css(css);
            p.attr('for', 'pop');
            popIsShow = true;
            if ($('[for="' + id + '"]').length >= 1) return;
            $('body').append('<div id="_overlay" name="overlay" for=' + id + ' style="width:100%;height:100%;position:fixed;top:0;left:0;z-index:997;background:rgba(0,0,0,0.6);"></div>');
            //$('#_overlay').on('click',function(){popHide();})
        },200)

    }

}

Close popup:

function popHide() {
    $('[for="pop"]').fadeOut(100,function(){$('[for="pop"]').attr('style', '')});
    $('[name="overlay"]').fadeOut(100,function(){$('[name="overlay"]').remove()});
    $('body').removeClass('overflow')
}

jq plugin

Note: The plugin is based on jq. The plugin does not require other css files.

$.extend({
  //采用打开新弹窗就对应提高遮罩层的zIndex，当关闭最新的弹窗时就降低遮罩层的zIndex
  "layer": {
    open: function (_el,option) {
      var opt = $.extend(true, {fixed: true, opacity: 0.7, position: 'm'}, option)
      if (!_el) { return; }
      //找到所有弹出层最大的zIndex，然后新增的就+1
      var arr = []  //用来存放所有弹出层的zIndex
      $('[for="pop"]').each(function(index,item){
        arr.push($(item).css('zIndex')? parseInt($(item).css('zIndex')):0)
      })
      var max_zIndex = (arr.length==0) ? 999: Math.max.apply(null, arr);  //当前最大的zIndex
      var el = $(_el);
      var overlay = $('<div></div>')

      var g = function() {
        el.css({
          position: opt.fixed ? "fixed" : "absolute",
          zIndex: max_zIndex + 1,
          top: opt.position == 'm' ? '50%' : '',
          bottom: opt.position == 'b' ? '0' : '',
          left: '50%',
          marginLeft: -el.width() / 2,
          marginTop: -el.height() / 2
        }).attr('for', 'pop').show();
        if ($('[for="overlay"]').length == 0) {
          overlay.css({
            width: '100%',
            height: '100%',
            position: 'fixed',
            zIndex: max_zIndex,
            top: 0,
            left: 0,
            background: '#000',
            opacity: opt.opacity
          }).attr('for', 'overlay');
          $('body').append(overlay);
        }
        else {
          $('[for="overlay"]').css({zIndex: max_zIndex, opacity: opt.opacity});
        }
      };
      g();

      $(window).on('resize orientationchange', function () {
        g();
        setTimeout(g, 300);
      });
    },
    close: function (_el) {
      //如果当前只有最后一个弹窗了，则在关闭弹窗时去掉遮罩层
      if(_el) {
        //关闭单个弹窗
        $(_el).removeAttr('for').hide();  //先隐藏弹框
        //判断是否需要关闭遮罩层：如果当前还有其他弹框存在则不关闭遮罩层，如果没有弹窗存在了就关闭遮罩层

        //找到所有弹出层最大的zIndex，然后新增的就+1
        var arr = []  //用来存放所有弹出层的zIndex
        $('[for="pop"]').each(function (index, item) {
          arr.push($(item).css('zIndex') ? parseInt($(item).css('zIndex')) : 0)
        })
        var max_zIndex = (arr.length == 0) ? 999 : Math.max.apply(null, arr);  //当前最大的zIndex
        $('[for="overlay"]').css({zIndex: max_zIndex - 1}) //降低overlay的层级
        if ($('[for="pop"]').length == 0) {$('[for="overlay"]').remove();}
      }
      else{
        //关闭所有弹窗
        $('[for="pop"]').removeAttr('for').hide();
        $('[for="overlay"]').remove();
      }
    }
  }
});

How to use:
Open popup:
Basic usage: $.layer.open('id或.class或者其他jq')
If you want to control whether the popup is fixed in the middle of the screen, the transparency of the mask layer, and the position of the popup, you can consider using the second parameter of the open method, for example: $.layer.open('id或.class或者其他jq',{fixed: true, opacity: 0.2, position: 'm'})
close the popup Window: To $.layer.close()close all pop-up windows, you can use this method directly; if you want to close the specified pop-up window, you need to add a parameter:$.layer.close('id或.class或者其他jq')