3

每当我尝试填写登录表单（这是一个巨大的弹出 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>

结果.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>

4

3 回答 3

2

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

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

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

closeOnContentClick: false

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

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

于 2013-08-27T11:24:46.730 回答
1

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

closeOnContentClick: false

所以

$('.ajax-popup-link').magnificPopup({
   type: 'ajax',
   alignTop: false,
   overflowY: 'scroll',
   closeOnContentClick: false
 });
于 2013-08-13T03:54:47.383 回答
0

将此添加到您的放大弹出选项中以单击内部白框

 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
    });
于 2015-06-13T06:30:48.443 回答