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?

Use `parent.$.magnificPopup.close();` if the magnificPopup type is `iframe`. — sglessard, Jun 15 '16 at 14:14

seba · Answer 1 · 2015-02-22T13:17:41.923

11

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>

edited Feb 22 '15 at 13:17

answered Feb 19 '15 at 12:31

seba

153
8

1

Unfortunately that still does not work. When the button is clicked, `closePopup()` function gets called but `$.magnificPopup.close()` is not triggered. I am using an Ajax form in PHP but that shouldn't matter. – user1448031 Feb 20 '15 at 07:20
do you try to load an iframe in your popup ? – seba Feb 20 '15 at 20:02
Yes I am using iframe. – user1448031 Feb 20 '15 at 22:08
Is there a solution without the need of an additional jQuery inline function `closePopup`? Something that only uses onClick – basZero Dec 01 '17 at 13:59

score 7 · Answer 2 · edited Dec 05 '16 at 10:33

7

try this

<pre class="default prettyprint prettyprinted">
<code>

    $('#close').click(function(){
        $('.mfp-close').trigger('click');
      });

</code>
</pre>

edited Dec 05 '16 at 10:33

Anirudh Sharma

7,968
13
40
42

answered Dec 05 '16 at 10:12

PaulusCh

71
1
3

$('.mfp-close').trigger('click'); work for me, thanks! – Fernando Feb 24 '17 at 21:12

score 3 · Answer 3 · answered Apr 19 '17 at 17:15

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!

score 2 · Answer 4 · answered Apr 01 '15 at 06:32

2

You need to add inside popup parameters closeBtnInside:true.

answered Apr 01 '15 at 06:32

albert_rar

19
1
3

score 1 · Answer 5 · answered May 01 '15 at 02:17

It seems like a bug in magnific pop up. In order to use button inside container you have to supply fixedContentPos: true;

following code seems to work for me fine. Hope it helps.

    $('.ajax-popup-link').magnificPopup({
        type: 'ajax',
        removalDelay: 100, // Delay in milliseconds before popup is removed
        mainClass: 'my-mfp-slide-bottom',`enter code here` // Class that is added to popup wrapper and background
        closeOnContentClick: false, 
        closeOnBgClick: false,
        showCloseBtn: true,
        closeBtnInside: true,
        fixedContentPos: true,
        alignTop: true,
//        settings: {cache:false, async:false},
        callbacks: {
            open: function () {   
            },
            beforeClose: function () {
                this.content.addClass('light-speed-out');
            },
            close: function () {
                this.content.removeClass('light-speed-out');
            }
        },
        midClick: true

    });

score 0 · Answer 6 · answered Jun 17 '15 at 10:00

0

$.magnificPopup.close(); .. would work if you put it in your content loaded with ajax

answered Jun 17 '15 at 10:00

Eugen G.

1

Could you please elaborate more your answer adding a little more description about the solution you provide? – abarisone Jun 17 '15 at 10:21

Aysad K. · Answer 7 · 2015-11-28T00:38:31.953

1. Solution

Methods below don't have shorthand like "open" and "close".

They should be called through "instance" object. "instance" is available only when at least one popup was opened. For example: $.magnificPopup.instance.doSomething();

here example of customized close for magnificPopup

// save magnificPopup instance in variable

var magnificPopup = $.magnificPopup.instance;

//open magnific instance

$.magnificPopup.open({
  items: {
    src: 'someimage.jpg'
  },
  type: 'image'
}, 0);

// Close popup that is currently opened

magnificPopup.close();

// Navigation when gallery is enabled

magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to item #4

// updates the popup content. Useful after you change "items"

magnificPopup.updateItemHTML();

2. Solution

you can add a button within the popup and assign a function on click event like:

$('#close-button-verify').click(function(){
    //This will close the most recently popped dialog
    //This method specially works for auto popped dialogs i.e.
    //Popup you opened using $.magnificPopup.open()

    $.magnificPopup.close();
 });

If popup is triggered via onClick event then the same jQuery Object can be used to close that popup

$('#close-button-verify').click(function(){
    $('#id_of_button_that_opened_magnificpopup').magnificPopup('close');
 });

good luck :)

score 0 · Answer 8 · answered Oct 06 '17 at 10:23

0

The simplest way is to add "mfp-close" class to your control, something like this:

    <a href="#" title="Close" type="button" class="btn btn-default mfp-close">Close</a>

Here Bootstrap classes also used to make link looks like button - doesn't matter.

answered Oct 06 '17 at 10:23

Demiurg

111
1
9

This just adds a close div to the top right corner, not what has been asked here. – basZero Dec 01 '17 at 13:58

rvirk · Answer 9 · 2020-01-30T19:32:58.030

0

$(function () {
  $('.popup-modal').magnificPopup({
  type: 'inline'
});
 $(document).on('click', '.popup-modal-dismiss', function (e) {
  e.preventDefault();
  $.magnificPopup.close();
 });
});

<div class="popup-modal mfp-hide">
 <h1>Modal</h1>
 <p>Modal Description.</p>
 <p><a class="popup-modal-dismiss mfp-close-btn-in" href="#">Close</a></p>
</div>

edited Jan 30 '20 at 19:32

answered Jan 30 '20 at 18:12

rvirk

19
3

score 0 · Answer 10 · answered Jan 27 '23 at 19:14

There's already an existing answer in the Magnific Popup Doc.

It's :

$('.popup-link').magnificPopup({
     closeMarkup: '<button title="%title%" type="button" class="mfp-close"> {enter your custom markup here} </button>',
     tClose: 'Button title',
});

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

10 Answers10

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

Or do it that way : (tested)