I am using Magnific Popup for uploading images. When the user clicks or presses the close button, I'd like to get confirmation from the user whether to close on not.

This is my Javascript:

$('#upload').magnificPopup({
    type:'inline',
    callbacks: {
        close: function(){
            if( confirm("Are you sure you want to close?") ) {
              return true;
            }
              return false;
            }
          }
      }
});

But it is not working.

I am using Magnific Popup for uploading images. When the user clicks or presses the close button, I'd like to get confirmation from the user whether to close on not.

This is my Javascript:

$('#upload').magnificPopup({
    type:'inline',
    callbacks: {
        close: function(){
            if( confirm("Are you sure you want to close?") ) {
              return true;
            }
              return false;
            }
          }
      }
});

But it is not working.

• javascript
• jquery
• html
• magnific-popup

2 Answers 2

You can override the close method. By modifying the instance, you will only change the functionality of this specific popup. Then simply call the original close method to finish the job.

$('#upload').magnificPopup({
  type:'inline',
  callbacks: {
    open: function() {
      $.magnificPopup.instance.close = function() {
        // Do whatever else you need to do here
        var confirmed = confirm("Are you sure you want to close?");
        if(!confirmed) {
          return;
        }

        // Call the original close method to close the popup
        $.magnificPopup.proto.close.call(this);
      };
    }
  }
});

You could try:

( '#upload' ).magnificPopup({
    type: 'inline',
    callbacks: {
      close: function(){
         var didConfirm = confirm( "Are you sure?" );
         if( didConfirm == false ){
            return false;
         }
      }
    }
});