Magnific Popup: How to add a custom close button inside a popup form?

Question

I have a form that opens up on a popup and have added a custom close button next to a submit button.

This is a jQuery I am using for the close button:

$(document).ready(function() {
    $('#close').click(function() {
        $.magnificPopup.close();
    });
});

However this does not seem to work. Does anyone know how to do this?

Answer 1

If your snippet is located in your main js, the ajax popup button may not be binded to the event. I imagine two solutions :

Use "on" instead of "click" :(not tested)

$('#close').on( "click", function() {
  $.magnificPopup.close();
});

Or do it that way : (tested)

add this function in your main js

function closePopup() {
  $.magnificPopup.close();
}

And use this kind of button in your popup html

<button type="button" onClick="closePopup();">Close</button>

Iframe :

If your button is located in an iframe and the magnificpopup script in the main window, on the same domain, you can access the above function like this :

<button type="button" onClick="parent.closePopup();">Close</button>