Magnific Popup - Popup disappearing on click

Question

I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable until you click outside of that box.

I'm hoping its just something extremely simple I've missed, but it's still doing my head in.

I really appreciate any help I can get!

Thanks :)

Yes, you have missed something extremely simple, please post some code! No-one can really answer your question without seeing what you have tried. — Ken Y-N, May 17 '13 at 02:24
Hi @KenY-N, The CMS is Websitebaker so its literally just a piece of PHP that links to a WYSIWYG page. I read on https://github.com/dimsemenov/Magnific-Popup/pull/39 that you need to "loop the nodes" but I dont know how to do that exactly. — Frank, May 17 '13 at 03:20

Dmitry Semenov · Answer 1 · 2015-07-31T20:07:44.320

If you're using "ajax" content type, you need to make sure that you've got only one root node.

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

E.g., this is correct contents of ajax file:

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

Incorrect:

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

Incorrect:

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

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

If, for whatever reason, you can't change the contents of ajax file, you may parse content in parseAjax callback, like described here (so the mfpResponse.data contains only one root node).

Thank you, that was it! (actually, it was a – Francisco Corrales Morales Jan 31 '14 at 21:35 — Francisco Corrales Morales, Jan 31 '14 at 21:35

score 1 · Answer 2 · answered May 26 '13 at 09:52

I can't reply yet (too low rep..) so adding it like this: seems that this also counts for type: 'inline'. Safe to always wrap content by a div..

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

score 1 · Answer 3 · answered Jun 07 '13 at 11:05

I had the same error. Turned out to be a dumb mistake from my side, 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 needed to be different classes like so:

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

score 0 · Answer 4 · answered Jan 07 '14 at 07:16

0

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

answered Jan 07 '14 at 07:16

Dean Oakley

5,366
2
18
14

score 0 · Answer 5 · edited Mar 30 '16 at 11:08

0

Add modal:true in the magnificPopup:

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

edited Mar 30 '16 at 11:08

Vasfed

18,013
10
47
53

answered Mar 30 '16 at 09:33

Manik Thakur

294
2
15

Magnific Popup - Popup disappearing on click

5 Answers5

Linked