CODEWITHSUNDEEP
jquerymagnific-popup
user1448031
user1448031

Reputation: 2166

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

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?

Upvotes: 10

Views: 47520

Answers (10)

Stephanie Poulin
Stephanie Poulin

Reputation: 11

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',
});

Upvotes: 1

rvirk
rvirk

Reputation: 19

$(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>

Upvotes: 0

Demiurg
Demiurg

Reputation: 121

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.

Upvotes: 0

ChongFury
ChongFury

Reputation: 161

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!

Upvotes: 3

PaulusCh
PaulusCh

Reputation: 71

try this 

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

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

</code>
</pre>

Upvotes: 7

Aysad K.
Aysad K.

Reputation: 21

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

Upvotes: 0

Eugen G.
Eugen G.

Reputation: 1

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

Upvotes: 0

Ghufran Yousafi
Ghufran Yousafi

Reputation: 21

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

    });

Upvotes: 1

albert_rar
albert_rar

Reputation: 19

You need to add inside popup parameters closeBtnInside:true.

Upvotes: 2

seba
seba

Reputation: 153

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>

Upvotes: 11

Related Questions