CODEWITHSUNDEEP
javascriptjquerypopup
Kipkool
Kipkool

Reputation: 43

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

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 ;-)

Upvotes: 3

Views: 9988

Answers (2)

dariodev
dariodev

Reputation: 406

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

Upvotes: 4

PalinDrome555
PalinDrome555

Reputation: 927

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

});

Upvotes: 0

Related Questions