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

Question

I have a form that opens in a popup and added a custom close button next to the submit button.

This is the jQuery that I use for the close button:

 $(document).ready(function() { $('#close').click(function() { $.magnificPopup.close(); }); }); 

However, this does not work. Does anyone know how to do this?

Answer 1

If your fragment is in main js, ajax popup button cannot be attached to event. I present two solutions:

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

 $('#close').on( "click", function() { $.magnificPopup.close(); }); 

Or like this: (verified)

add this function to your main js

 function closePopup() { $.magnificPopup.close(); } 

And use this button in your html popup

 <button type="button" onClick="closePopup();">Close</button> 

Iframe:

If your button is in an iframe and magnificpopup script in the main window in the same domain , you can access the above function as follows:

 <button type="button" onClick="parent.closePopup();">Close</button> 

Answer 2

try it

 <pre class="default prettyprint prettyprinted"> <code> $('#close').click(function(){ $('.mfp-close').trigger('click'); }); </code> </pre> 

Answer 3

You need to add internal popup parameters closeBtnInside:true .

Answer 4

It seems that a magnification error appears. To use the button inside the container, you must set fixedContentPos: true;

The following code seems to work fine for me. Hope this 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 }); 

Answer 5

.

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

Answer 6

1. The decision

The methods below do not have short names, such as "open" and "closed."

They must be called through the instance object. "instance" is only available when at least one popup has been opened. For example: $. MagnificPopup.instance.doSomething ();

here is an example of individual closure for magnificPopup

// save the magnificPopup instance in a variable

 var magnificPopup = $.magnificPopup.instance; 

// open a large-scale instance

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

// Close the popup that is currently open

 magnificPopup.close(); 

// Navigation while the gallery is on

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

// update popup content. Useful after changing "items"

 magnificPopup.updateItemHTML(); 

2. Decision

you can add a button in a popup window and assign a function in a click event, for example:

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

If a popup is triggered through an onClick event, then the same jQuery object can be used to close this popup

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

good luck :)

Answer 7

Some of these answers work, but it depends on your popup implementation. If you still have problems, I would suggest using a 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!

Answer 8

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

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

Here Bootstrap classes are also used to make the link look like a button - it doesn't matter.