一般的に使用されるフロントエンドスキルの終了ポップアッププラグイン（2）

ポップアッププラグイン

序文：このプラグインを作成する目的は、主にプロジェクトでの独自の使用を容易にすることです。これは、当社のプロジェクトの需要側がサードパーティのプラグインの使用をほとんど許可しないためです。すべてのプラグインは自分で作成する必要があり、他のCDNリソースは許可されていないため、通常は自分でプラグインを作成します。

シンプルな通話プラグイン

ポップアップウィンドウを開きます。

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)

    }

}

ポップアップを閉じる：

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

jqプラグイン

注：プラグインはjqに基づいています。プラグインは他のcssファイルを必要としません。

$.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();
      }
    }
  }
});

使用方法：
ポップアップを開く：
基本的な使用法：$.layer.open('id或.class或者其他jq')
ポップアップを画面の中央に固定するかどうか、マスクレイヤーの透明度、ポップアップの位置を制御する場合は、openメソッドの2番目のパラメーターを使用することを検討できます。例：$.layer.open('id或.class或者其他jq',{fixed: true, opacity: 0.2, position: 'm'})
ポップアップを閉じるウィンドウ：$.layer.close()すべてのポップアップウィンドウを閉じるには、このメソッドを直接使用できます。指定したポップアップウィンドウを閉じる場合は、パラメーターを追加する必要があります。$.layer.close('id或.class或者其他jq')