CODEWITHSUNDEEP
popupmagnific-popup
Frank
Frank

Reputation: 71

Magnific Popup - Popup disappearing on click

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

Upvotes: 7

Views: 7010

Answers (5)

Manik Thakur
Manik Thakur

Reputation: 294

Add modal:true in the magnificPopup:

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

Upvotes: 0

Dmytro Semenov
Dmytro Semenov

Reputation: 4626

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

Upvotes: 9

Dean Oakley
Dean Oakley

Reputation: 5646

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

Upvotes: 0

Christian Werther
Christian Werther

Reputation: 346

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>

Upvotes: 1

publicJorn
publicJorn

Reputation: 2506

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

Upvotes: 1

Related Questions