2016-01-07 6 views
0

Я хочу перейти от одного объекта magnific-popup к другому, выполнить какое-то действие, а затем вернуться к первому. Для этого я переопределяю метод close (перед открытием второго элемента) с помощью $ .magnificPopup.instance.close, в котором я вызываю метод $ .magnificPopup.proto.open(). Кажется, что это работает, но я не могу отменить его обратно к его первоначальному поведению, а кнопка закрытия первого всплывающего окна по-прежнему вызывает измененное поведение. Вот соответствующий jsfiddle:Вложенные Magnific Popup

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'); 
     } 
    } 
    } 
}); 
+0

ваша скрипка имеет проблемы с синтаксисом, исправить это. – Siddharth

ответ

0

Проблема заключается в том, что я должен закрыть первый экземпляр Magnific всплывающего окна. Это сообщение помогло мне найти рабочее решение: 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'); 

    } 
    } 
});