华丽的弹出-弹出消失点击

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回调中解析内容，就像这里描述的那样(因此mfpResponse.data只包含一个根节点)。

Answer 2

我还不能回复(太低的rep..)，所以像这样添加:似乎这也计算类型:'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

Dmitry解释了这里的问题https://github.com/dimsemenov/Magnific-Popup/issues/34

Answer 5

在magnificPopup中添加modal:true:

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