magnificPopupを使ったポップアップinポップアップを実装

0_readme.md

やりたいこと

• magnificPopupで動的にDOMを生成し、そのDOMに対して更にmagnificPopupでポップアップを出したい
• 新たに開いたポップアップを閉じたら、元々開いていたポップアップを再び表示させたい

ポイント

• $.magnificPopup.open()でポップアップを表示している場合は、callbackにはinstanceからアクセスする
• 最初のポップアップでDOMを生成しているため、.on()でliveイベントを設定
• イベントの重複登録を防ぐため、.onの前に.offを行う
• 新たに開いたポップアップを閉じたら.trigger()で最初のポップアップからイベント付与までを再実行

magnificPopup-pop-in-pop.js

$(function () {



  var btnOnClick = function() {
    var that = this; // clickしたbutton要素を変数に
    $.magnificPopup.open({
      items: [
        {
          src: $('<a href="#" class="click-link">クリックリンク</a>'),
          type: 'inline'
        }
      ]
    });

    // 初期モーダルで生成されるDOMに対してイベント設定（live）
    // イベントの重複登録を防ぐため一旦offでイベントをクリア
    $('body').off('click.temp-modal');
    $('body').on('click.temp-modal', '.click-link', function() {
      $.magnificPopup.instance.st.callbacks = {
        // 閉じた後に再度
        afterClose: function() {
          // btnがクリックされた時の動作（モーダルの表示・イベントの設定）を再度行う
          $(that).trigger('click');
        }
      };

      $.magnificPopup.open({
        items: [
          {
            src: $('<div class="pop-in-pop">Dynamically created element</div>'),
            type: 'inline'
          }
        ]
      });
      // 開いた後に実行（閉じる前に実行）
      console.log('更にポップアップを開きました');
    });
  };

  // $('#btn').on('click', function() {
  //   btnOnClick.call(this);
  // });

  $('#btn').on('click', btnOnClick);  // こう使えばcallは要らない（今回の場合は同時に実行するものがないからできる）

  // 読み込み時に実行することも
  $('#btn').trigger('click');



});