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

Answer 1

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

Answer 2

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

Answer 3

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>