Effective pop-up action before closing

Question

I implemented Magnific Popup in my solutions, and I use 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 the callback, but it does not work properly.

$('#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 quick sample, not a production code. The if-else statement exists because otherwise the Bootbox dialog is not displayed (there is usually no need to check the return value, because it is passed as an argument, which in this example is called the result).

The problem is that after I click the close button, my image (i.e. the contents of the popup) will disappear. I would like to be able to cancel the close operation and achieve what I need an event that will fire until the popup closes.

Can this be achieved 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

Answer 2

This code only overwrites the open popup! If you open the same popup after closing, this callback will disappear!

 $.magnificPopup.instance.st.callbacks.close=function(){ // your code here // this actually close popup $.magnificPopup.proto.close.call(this); };