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 ?

score 21 · Accepted Answer · answered Jun 21 '13 at 15:17

21

  // 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

answered Jun 21 '13 at 15:17

Dmitry Semenov

4,566
2
36
39

Thank you for your reply, I rest my case :) – Tobiasz Jun 24 '13 at 06:49
Hi, I have posted a question regarding your magnific Popup, i hope you can help http://stackoverflow.com/questions/26272970/image-gallery-with-multiple-title-on-right-side – Learning Oct 09 '14 at 10:30
This is also good for putting actions after the close.call line, in my case refreshing the page container – Kiwizoom Apr 19 '16 at 22:35

score 0 · Answer 2 · answered Feb 15 '17 at 21:25

This code overwrite only currently opened popup! If you open same popup after closing, this callback will be gone!

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

  // your code here

  // this actually close popup
  $.magnificPopup.proto.close.call(this);

};

Magnific Popup action before close

2 Answers2

Linked