Magnific Popup - popup that disappears when clicked

Question

I recently implemented "Magnific Popup" and the popup appeared fine, however, when I press the enter button, the popup disappears on the parent page. In the examples displayed on the plugin website, the entire dialog can be clicked until you click outside this field.

I hope this is just something very simple that I missed, but it still makes my head.

I really appreciate any help I can get!

Thanks:)

Answer 1

If you are using the “ajax” content type, you need to make sure that you have only one root root.

http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type

For example, this is the correct contents of the ajax file:

<div> html content <script src="something.js"></script> </div> 

Wrong:

 <script src="something.js"></script> <div> html content </div> 

Wrong:

 <div> html content </div> <div>Another content</div> 

Also make sure that closeOnContentClick set to false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick

If for some reason you cannot change the contents of the ajax file, you can parse the content in the parseAjax callback as described here (therefore mfpResponse.data contains only one root root).

Answer 2

I still can not answer (reputation is too low), so I add it like this: It seems that this also applies to the type: "inline". It is safe to always wrap the contents of a div.

 $.magnificPopup.open({ items: { src: '<div>'+ html +'</div>' }, type: 'inline', closeOnContentClick: false }, 0); 

Answer 3

I had the same error. Turning out to be a stupid mistake on my part, I had the same class on my opener and my inline div.

 <a href="#popup" class="dialog">Open</a> <div id="popup" class="dialog mfp-hide"></div> 

Of course, they had to be different classes:

 <a href="#popup" class="dialog">Open</a> <div id="popup" class="dialog-box mfp-hide"></div> 

Answer 4

Dmitry explains the problem here https://github.com/dimsemenov/Magnific-Popup/issues/34

Answer 5

Add modal:true to magnificPopup:

 $('.your_class').magnificPopup({ type: 'ajax', modal:true });