Callbacks do not work when opening a popup from another

Question

I currently have a full-screen pop-up, and inside this pop-up I have a link that opens another large-scale pop-up. Sort of:

 $('.logbook-entry-details').magnificPopup({
     type: 'ajax',
     closeBtnInside:true,
     closeOnBgClick:false,
     closeOnContentClick:false,
     callbacks: {
         beforeOpen: function () {
             $.magnificPopup.close();
         },
         open: function() {
             console.log('Popup open has been initiated');
            },
            beforeClose: function() {

            console.log('Popup before close has been initiated');
          },
         close: function() {
            console.log('Popup close has been initiated');

            },
         afterClose :function() {
             console.log('Popup after close has been initiated'); 
            }
         }
 });

After reading it, I found that the callbacks of the second pop-up window will not be registered until I close the original pop-up window, since opening a new one simply replaces the contents and does not actually recreate the new instance.

I'm trying to figure out how I could link my link inside my popup to the current popup before invoking code to open a new one so that it can register my callbacks.

, , , - . , .

Answer 1

- , .

// a button that closes the popup
$('#cancel-logbook-entry-btn').click(function(){
$.magnificPopup.proto.close.call(this);
});

$.magnificPopup.instance.close = function () {

 //code to show the original popup
};

,

 $.magnificPopup.instance.close = function () {
       // "proto" variable holds MagnificPopup class prototype
       // The above change that we did to instance is not applied to the prototype, 
       // which allows us to call parent method:
       $.magnificPopup.proto.close.call(this);
  };