Magnific Popup action before close

Question

I have implemented Magnific Popup in my solutions and I am using Bootbox to get confirmation from the user that he wants to close the window without saving changes, etc.

I hooked up my custom function to close callback but it doesn't work as expected.

$('#divThumbnails').magnificPopup({
            delegate: 'a',
            type: 'inline',
            midClick: true,
            callbacks: {
                close: function () {
                    var confirm = bootbox.confirm('Are you sure?', function(result) {
                    });

                    if (confirm)
                        return true;
                    else
                        return false;

                }
            }
        });

This is just a fast sample, not production code. The if-else statement is there because otherwise Bootbox dialog fails to show (normally there is no need to check the returned value as it is passed as argument which in this example is called result ).

The problem is that after I click the close button my image (which is the content of the popup) disappears. I would like to have an opportunity to cancel the close operation and to achieve that I need an event that will fire BEFORE closing the popup.

Is this possible to achieve with Magnific Popup ?

Answer 1

  // this part overrides "close" method in MagnificPopup object
  $.magnificPopup.instance.close = function () {

      if (!confirm("Are you sure?")) {
          return;
      }

       // "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);
  }; 

http://codepen.io/dimsemenov/pen/edCgo