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>

标签： jquery magnific-popup

3条回答

闹够了就滚

2楼-- · 2019-04-11 14:16

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.

0人赞添加讨论(0) 举报

爷、活的狠高调

3楼-- · 2019-04-11 14:19

add this to your magnific popup options

closeOnContentClick: false

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

0人赞添加讨论(0) 举报

干净又极端

4楼-- · 2019-04-11 14:39

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

0人赞添加讨论(0) 举报

Click anywhere closes MagnificPopup ajax box

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间