jQuery magnific-popup : create a button inside the popup to close the popup

Question

Hope you can help me. I read and read again the documentation of Magnific Popup, but I'm not good enough with javascript.

1- I open a popup with this link :

<a href="mysubpage.html" class="pop">OPEN POPUP</a>

and this javascript :

$('.pop').magnificPopup({ type:'iframe', showCloseBtn : true, closeOnBgClick : true, midClick: true });

2- in my popup, I would like a button 'CLOSE' to close the pop-up.

I try this but it doesn't worked :

<input type="button" value="CLOSE" onclick="magnificPopup.close();" />
<input type="button" value="CLOSE" onclick="$.magnificPopup.close();" />
<input type="button" value="CLOSE" onclick="$('pop').magnificPopup.close();" />
<a href="#" class="mpf-close">CLOSE</a>
<a href="#" onclick="magnificPopup.close();">CLOSE</a>

I read I need to place this code :

var magnificPopup = $.magnificPopup.instance; 

But where ? in which page ? with what syntaxe ?

Magnific Popup documentation : LINK

Thanks for helping. Have a good day ;-)

Answer 1

The following will work. Add button (or any other element)

<button id="my-custom-close">close</button>

... and this javascript

$('#my-custom-close').click(function(){
    //This will close popup dialog opened using $.magnificPopup.open()
    $.magnificPopup.close();
});

Answer 2

There is an option to add a close button, and option to display inside popup. I would not use custom buttons or elements to try to close the popup, it should be included inside the popup once you have these two options set.

<a href='#' class='pop'>Open Popup</a>

$('.pop').magnificPopup({ 
  // main options
  showCloseBtn: true,
  closeBtnInside: true,

  gallery: {
    // options for gallery
    enabled: true
  },
  image: {
    // options for image content type
    titleSrc: 'title'
  }

});