单击任意位置关闭 MagnificPopup ajax 框答案

【问题标题】：Click anywhere closes MagnificPopup ajax box单击任意位置关闭 MagnificPopup ajax 框
【发布时间】：2013-08-13 03:46:29
【问题描述】：

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

main.html

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

&lt;a class="simple-ajax-popup-align-top" href="result.php"&gt;try me&lt;/a&gt;&lt;br&gt;

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

【解决方案1】：

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

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

换句话说，尽量避免使用多个<div>s，并且不要包括<html>、<body> 等。不幸的是，这将导致问题中描述的行为，即弹出窗口关闭。我认为这是因为它无法确定内容的实际位置，所以它认为您点击了外部内容 => 关闭弹出窗口。

closeOnContentClick: false

默认情况下已设置，因此无济于事，但可以尽可能简单地清理代码。

我还想提一个替代方案：http://nyromodal.nyrodev.com/，它似乎可以更顺畅地处理事情，并且还包括按 id 进行内容过滤。

【讨论】：

【解决方案2】：

将此添加到您的宏伟弹出选项中

closeOnContentClick: false

所以

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

【讨论】：

【解决方案3】：

将此添加到您的宏伟弹出选项中点击内白框

 closeOnContentClick: false

点击黑色背景时停止关闭框

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

【讨论】：