Magnific Popup - Popup在点击时消失

Question

我刚刚实施了'Magnific Popup'并且弹出窗口很好，但是当我点击一个输入框时，整个弹出窗口会消失回到父页面。在插件网站上显示的示例中，整个对话框是可单击的，直到您单击该框外部。

我希望它只是一些非常简单的东西，我已经错过了，但它仍然在努力。

我真的很感激我能得到任何帮助！

谢谢：）

Answer 1

如果您使用的是“ajax”内容类型，则需要确保只有一个根节点。

http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type

，例如，这是ajax文件的正确内容：

<div>
    html content
    <script src="something.js"></script>
</div>

不正确：

<script src="something.js"></script>
<div>
    html content
</div>

不正确：

<div>
    html content
</div>
<div>Another content</div>

还要确保closeOnContentClick设置为false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick

如果由于某种原因，您无法更改ajax文件的内容，您可以解析parseAjax回调中的内容，如所描述的here（因此mfpResponse.data只包含一个根节点）。

Answer 2

我还不能回复（代表太低..）所以这样添加： 似乎这也适用于类型：'inline'。安全总是用div包装内容..

$.magnificPopup.open({
  items: {
    src: '<div>'+ html +'</div>'
  },
  type: 'inline',
  closeOnContentClick: false
}, 0);

Answer 3

我有同样的错误。 原来是我身边的一个愚蠢的错误，我在开场白和我的内联div上有相同的课程。

<a href="#popup" class="dialog">Open</a>
<div id="popup" class="dialog mfp-hide"></div>

当然他们需要成为不同的类：

<a href="#popup" class="dialog">Open</a>
<div id="popup" class="dialog-box mfp-hide"></div>

Answer 4

德米特里在这里解释了问题https://github.com/dimsemenov/Magnific-Popup/issues/34

Answer 5

Add modal:true in the magnificPopup:

$('.your_class').magnificPopup({
    type: 'ajax',
    modal:true
});