单击任意位置时，Magnific Popup 将关闭

Question

我不明白，为什么当我单击弹出窗口的任意位置时，Magnific Popup 插件会关闭弹出窗口。它的角落里有一个 X 按钮，它已经设计好了。有谁知道如何修复它，使其仅在我单击 X 时关闭？

代码如下：

打开

<script type="text/javascript">
      $(document).ready(function() {

        $('.simple-ajax-popup-align-top').magnificPopup({
          type: 'ajax',
          alignTop: true,
          overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
        });

        $('.simple-ajax-popup').magnificPopup({
          type: 'ajax'
        });

      });
    </script>

Answer 1

magnific popup 中的以下属性将帮助您关闭弹出窗口，

closeOnBgClick：如果为真，则无论在内容之外的任何位置（黑色覆盖）单击，弹出窗口都会关闭。为防止这种情况，请仅在单击弹出窗口右上角的 X（关闭）按钮时将值分配为 false 以关闭。默认情况下，此属性为 true。

enableEscapeKey：如果为true，则单击退出键时弹出窗口将关闭。为防止这种情况，请仅在单击弹出窗口右上角的 X（关闭）按钮时将值分配为 false 以关闭。默认情况下，为此分配 true。

希望以上几点对你有所帮助！

Answer 2

我遇到了同样的问题，但是通过查看代码我发现了问题所在。

在源代码中，有一个_checkIfClose 函数用于检查点击发生的位置。但是，当它检查点击是否在内容内时，它会检查根元素的后代而不是容器的后代。我通过 ajax 加载的内容没有一个根元素，我有这样的东西：

<ul><li></li><li></li></ul>
<div></div>
<div></div>

通过在我的内容周围添加包含 <div> 的标签，它解决了问题。

如果您在 ajaxed 内容之外单击它仍然会关闭 - 例如，我的内容周围的 magnific 容器上有 css 填充，所以如果我单击填充，它仍然会关闭。

希望这会有所帮助！

Answer 3

这是我在我的 js 中使用的：

<script>
  $(document).ready(function() {
    $('.magnific-popup-link').magnificPopup({
      type: 'ajax',
      midClick: true,
      mainClass: 'mfp-fade',
      closeOnBgClick: false 
    });
  });
</script>

问候，我希望这会有所帮助！

Answer 4

我有同样的问题。在某处阅读代码，我发现了一个防止弹出关闭的类（mfp-prevent-close）。

将它添加到弹出窗口中的所有项目中（它不是很优雅，但是，嘿，工作完成了：P）。

这里是我的一些弹出内容

<div class="half left pb mfp-prevent-close">
    <label id="first_name_1_label" for="first_name_1" class="fieldLabel firstOfCol left mfp-prevent-close">First Name</label>
    <input id="first_name_1" name="first_name_1" class="fieldInput left mfp-prevent-close" type="text">
    <label id="surname_1_label" for="surname_1" class="fieldLabel left mfp-prevent-close">Surname</label>
    <input id="surname_1" name="surname_1" class="fieldInput left mfp-prevent-close" type="text">
    <label id="salutation_label" for="salutation" class="fieldLabel left mfp-prevent-close">Salutation</label>
    <div class="left mfp-prevent-close" style="min-width: 280px;">
        <select id="salutation" name="salutation" class="fieldInput quarter left mfp-prevent-close">
            <option class="mfp-prevent-close" value=""></option>
            <option class="mfp-prevent-close" value="Mr.">Mr.</option>
            <option class="mfp-prevent-close" value="Mrs.">Mrs.</option>
            <option class="mfp-prevent-close" value="Ms.">Ms.</option>
            <option class="mfp-prevent-close" value="Miss">Miss</option>
            <option class="mfp-prevent-close" value="Dr.">Dr.</option>
            <option class="mfp-prevent-close" value="Prof.">Prof.</option>
            <option class="mfp-prevent-close" value="Other">Other</option>
        </select>
        <input id="salutation_other" name="salutation_other" class="fieldInput quarter right mfp-prevent-close" type="text" disabled="true">
    </div>
</div>

（我必须在选项中添加它们，因为 Firefox 在选择它们时关闭了弹出窗口）。

Answer 5

这是我用的

<script type="text/javascript">
$("#custom-content").click(function(e){
  if ($(e.target).is('.mfp-close')) return;
  if ($(e.target).is('a')) return;
  return false;
});
</script>

Answer 6

关闭黑幕点击功能并关闭ESC键退出该功能，设置失败，寻找解决办法

$('.jq-btn-contact').magnificPopup({
  items: {
    src: '../contact/index.html',
    type: 'iframe',
    closeOnBgClick: 'false',
    enableEscapeKey: 'false'
  }
});

Answer 7

$.extend(true, $.magnificPopup.defaults, { closeOnBgClick：假， });

它对我有用。 参考：https://dimsemenov.com/plugins/magnific-popup/documentation.html#translating