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

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

closeOnBgClick ：如果为true，则弹出窗口会在内容外部点击时关闭（黑色叠加层）。要防止这种情况，请仅在单击弹出窗口右上角的X（关闭）按钮时将值false指定为关闭。通过defualt，为此属性分配true。

enableEscapeKey ：如果为true，则单击转义键时弹出窗口将关闭。要防止这种情况，请仅在单击弹出窗口右上角的X（关闭）按钮时将值false指定为关闭。通过defualt，为此分配了真实。

希望这些观点可以帮到你。！

Answer 2

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

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

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

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

如果你点击你的ajaxed内容，它仍然会关闭 - 例如，我在我的内容周围的大容器上有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键退出该功能，设置失败，找到解决方案

＆＃13;

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

＆＃13;

点击任何地方时，Magnific Popup关闭

6 个答案: