Clever Geek Handbook

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

I hope you can help me. I have read and read the Magnific Popup documentation again but I am 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 the CLOSE button to close the popup.

I try this, but it didn't work:

<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 put this code:

var magnificPopup = $.magnificPopup.instance;

But where? on what page? with what syntax?

Magnific Popup Documentation: LINK

Thanks for the help. A good day; -)

+3


source to share


2 answers


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();
});
+4


source


It is possible to add a close button and the ability to display it inside the popup. I would not use custom buttons or elements to try and close the popup, it must be enabled inside the popup after setting these two options.



<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'
  }

});
0


source






More articles:


All Articles