7

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

我希望它只是我错过的非常简单的东西，但它仍然在我脑海中。

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

谢谢 ：）

4

5 回答 5

9

如果您使用“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仅包含一个根节点）。

于 2013-05-17T06:46:09.350 回答
1

我有同样的错误。原来是我这边的一个愚蠢的错误，我的开瓶器和我的内联 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>
于 2013-06-07T11:05:58.340 回答
1

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

$.magnificPopup.open({
  items: {
    src: '<div>'+ html +'</div>'
  },
  type: 'inline',
  closeOnContentClick: false
}, 0);
于 2013-05-26T09:52:42.580 回答
0

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

于 2014-01-07T07:16:40.513 回答
0

添加modal:truemagnificPopup：

$('.your_class').magnificPopup({
    type: 'ajax',
    modal:true
});
于 2016-03-30T09:33:52.167 回答