Question

每当我尝试填写登录表单（这是一个巨大的弹出式ajax框）时，它会在第一次点击时关闭。

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>

Answer 1

确保您“ajax-ing”的页面不包含超出需要的更多信息或标签。例如。它应该像这样干净：

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

换句话说，请尝试避免使用多个<div>，并且不要包含<html>，<body>等。不幸的是，这会导致问题中描述的弹出窗口关闭行为。我认为这是因为它无法确定内容的实际位置，因此它认为您点击了外部内容=＆gt;关闭弹出窗口。

closeOnContentClick: false

默认情况下已经设置了

，这样做无济于事，但可能会尽可能简单地清理代码。

我还想提一个替代方案：http://nyromodal.nyrodev.com/，它似乎处理得更顺畅，还包括按内容过滤内容。

Answer 2

将此添加到您的大胆弹出选项

closeOnContentClick: false

所以

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

Answer 3

将此添加到您的大胆弹出选项中点击内部白框

 closeOnContentClick: false

单击黑色bg时停止关闭框

closeOnBgClick:false

完整示例

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

点击任意位置关闭MagnificPopup ajax框

3 个答案: