Click anywhere closes MagnificPopup ajax box

Whenever I'm trying to fill login form (which is a magnific pop up ajax box) it gets closed in the first instance of click.

main.html

 $(document).ready(function() {
     $('.ajax-popup-link').magnificPopup({
       type: 'ajax',
       alignTop: false,
       overflowY: 'scroll'
     });
 });

<a class="simple-ajax-popup-align-top" href="result.php">try me</a><br>

result.php

<div>
    <form action="..." method="post">
        Email:
        <label class="field_container">
            Password:
            <input type='text' name='cust_username' id='username' maxlength="12" style="width: 250px; height: 30px" /></label>
        <label class="field_container">
            Password:
            <input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px" /></label>
        <input type='submit' name='Submit' value='Login' />
    </form>
</div>

Make sure your page that you are "ajax-ing" isn't containing more info or tags than needed. E.g. it should be as clean as this:

<div>
<h3>Heading</h3>
<p>
Text
</p>
</div>

In other words, try avoiding multiple <div>s and don't include <html>, <body> etc. That will unfortunately lead to the behaviour described in the question, of popup closing. I assume it's because it has trouble determining where the content actually is, so it thinks you clicked outside content => closes popup.

closeOnContentClick: false

is already set by default so that won't help, but cleaning up the code to as simple as possible might.

I would also like to mention an alternative: http://nyromodal.nyrodev.com/, which seems to handle things way smoother, and also includes content filtering by id.

add this to your magnific popup options

closeOnContentClick: false

$('.ajax-popup-link').magnificPopup({
   type: 'ajax',
   alignTop: false,
   overflowY: 'scroll',
   closeOnContentClick: false
 });

add this to your magnific popup options for click inner white box

 closeOnContentClick: false

Stop closing box when click on black bg

closeOnBgClick:false

Full example

$.magnificPopup.open({
        items: {
            src: '<div class="white-popup"><h1>Modal Test</h1><p>Test Some text.</p><p><a class="popup-modal-dismiss">Dismiss</a></p></div>',
            type:'inline'
        },
       closeOnContentClick: false,
       closeOnBgClick:false
    });

来源：https://stackoverflow.com/questions/18200338/click-anywhere-closes-magnificpopup-ajax-box

标签

jquery

magnific-popup