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

Some of these answers work, but it depends on your implementation of the popup. If you're still having trouble, I'd suggest using the callback method to ensure consistency:

$.magnificPopup.open({
  items: {
    src: $domElement,
    type: 'inline'
  }, 
  callbacks: {
    open: function() { 
        $('#close-btn').on('click',function(event){
          event.preventDefault();
          $.magnificPopup.close();
        }); 
    }
  }
}); 

Hope this helps!