Magnific Popup - 点击时弹出消失答案

【问题标题】：Magnific Popup - Popup disappearing on clickMagnific Popup - 点击时弹出消失
【发布时间】：2013-05-17 02:16:44
【问题描述】：

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

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

非常感谢我能得到的任何帮助！

谢谢:)

【问题讨论】：

是的，你错过了一些非常简单的东西，请贴一些代码！没有人能真正回答您的问题，而无需查看您的尝试。
嗨@KenY-N，CMS 是Websitebaker，所以它实际上只是一个链接到所见即所得页面的PHP 片段。我在github.com/dimsemenov/Magnific-Popup/pull/39 上读到您需要“循环节点”，但我不知道该怎么做。

【解决方案1】：

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

例如，这是正确的 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>

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

【讨论】：

【解决方案5】：

在magnificPopup 中添加modal:true：

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

【讨论】：