嵌套放大弹出菜单

Nested Magnific Popup

本文关键字:菜单 放大 嵌套      更新时间:2023-09-26

我想从一个放大弹出项传递到另一个,执行一些操作,然后返回到第一个。为了实现这一点,我用$.aampicPopup.instance.close重写了close方法(在打开第二个元素之前),在该方法中我调用了$.aampICPopup.proto.open()方法。这似乎有效,但我无法将其覆盖回其初始行为,并且第一个弹出窗口的关闭按钮仍然会触发修改后的行为。这里有一个相应的jsfiddle:

https://jsfiddle.net/matthieuG/ddkc83ca/12/

$('.first-popup-link').magnificPopup({
    closeBtnInside:true,
    callbacks: {
    open: function() {
      /*var magnificPopup = $.magnificPopup.instance;*/
    },
    open: function() {
      $.magnificPopup.instance.close = function() {
        console.log('close override is working');
        $.magnificPopup.proto.open({
          callbacks:{
            open: function() {
              console.log('open callback');
              $.magnificPopup.instance.close = function() {
                $.magnificPopup.proto.close.call(this);
                console.log('open close callback');
              }
            }
          },
          items: {
            src: '#first-popup' 
          },
          type: 'inline'         
        });     
      }
    }
  }
 });
$('.second-popup-link').magnificPopup({
    closeBtnInside:true,
    closeOnBgClick: false,
    callbacks: {
    beforeOpen: function() {
      $.magnificPopup.instance.close = function() {
        $.magnificPopup.proto.close.call(this);
        console.log('2nd close override is not working');
      }
    }
  }
});

问题是我必须关闭放大弹出窗口的第一个实例。这篇文章帮助我找到了一个可行的解决方案:http://www.4byte.cn/question/173750/callbacks-not-firing-when-opening-a-magnific-popup-from-another-one.html

我的工作解决方案如下:https://jsfiddle.net/matthieuG/zt4coq8f/1/

$('.first-popup-link').magnificPopup({
  type: 'inline',
  closeBtnInside: true,
  closeOnBgClick: false,
  closeOnContentClick: false,
  callbacks: {
    beforeOpen: function() {
      $.magnificPopup.instance.close = function() {
      $.magnificPopup.proto.close.call(this);
      };
      // $.magnificPopup.proto.close.call(this);
      console.log('before open has been initiated');
    }
  }
});
$('.second-popup-link').click(function() {
  $.magnificPopup.proto.close.call(this);
});
$('.second-popup-link').magnificPopup({
  type: 'inline',
  closeBtnInside: true,
  closeOnBgClick: false,
  closeOnContentClick: false,
  callbacks: {
    beforeOpen: function() {
      $.magnificPopup.instance.close = function() {
        $.magnificPopup.proto.close.call(this);
        $('.first-popup-link').trigger('click');
      };
      // $.magnificPopup.proto.close.call(this);
      console.log('before open has been initiated');
    },
      close: function() {
      console.log('Popup 2 close has been initiated');
    }
  }
});