Here's the JSFiddle for what u needed JSFiddle. Here in the code you can use your own div id like you have used in your case, in the src field. Your code was missing the extra function call which would be made when we close the popup.
Here in the code, a function call is made before closing the popup as you needed. Hope this helps.
Answer from Jennis Vaishnav on Stack OverflowMagnific Popup Callback when closing
Magnific Popup Callback when close
magnific popup - $.magnificPopup.open() callbacks is not working - Stack Overflow
Magnific popup: Get current element in callback
Videos
For Magnific Popup v0.9.8
var magnificPopup = $.magnificPopup.instance,
cur = magnificPopup.st.el;
console.log(cur.attr('myatt'));
First, i recommend to you to use the data attribute ( data-custom="foo" ) or a known attribute.
HTML :
<a href="photo.jpg" class="popup" data-custom="dsaad">Do it!</a>
<a href="photo.png" class="popup" data-custom="mycustomdata">Do it!</a>
jQuery :
$('.popup').magnificPopup({
type : 'image',
callbacks : {
open : function(){
var mp = $.magnificPopup.instance,
t = $(mp.currItem.el[0]);
console.log( t.data('custom') );
}
}
});
I do not know if a better way exists. Actually you can read their documentation about public methods and you will see there. I tested the code above and everything works fine :)
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;
}
}
}
});