Question

我的问题是，当我使用.goTo(1)时，项目0将会关闭。如果我选择第一次打开第1项，我可以查看弹出窗口。

我为我的popus导入模板：

{{> booking_preview }}
{{> user_preview }}

然后我在点击上创建一个弹出窗口，默认打开项目0：

$.magnificPopup.open({
      items: [
        {
          src: $(".booking-preview"),
          type: 'inline'
        },
        {
          src: $(".user-preview"),
          type: 'inline'
        }],
      enableEscapeKey: false,
      showCloseBtn: false,
      closeOnBgClick: true,
      removalDelay: 300,
      mainClass: 'mfp-fade mfp-tooltip'
    }, 0);

现在在这个弹出窗口中有一个按钮可以转到指定的项目：

$.magnificPopup.instance.goTo(1);
$.magnificPopup.instance.updateItemHTML();

现在为什么关闭弹出窗口而不是把我带到下一个弹出窗口，因为如果我选择默认打开第1项呢？

两个弹出模板如下所示：

第0项：

<template name="booking_preview">
  <section class="white-popup mfp-hide booking-preview" tabindex="-1" role="dialog" id="modal-show" aria-hidden="true">
    <div class="modal-inner">
      <header id="modal-label" class="group">
        {{> preview_booking }}
      </header>
      <div>
        {{> preview_book }}
      </div>
    </div>
  </section>
</template>

第1项：

<template name="user_preview">
    <section class="white-popup mfp-hide user-preview" tabindex="-1" role="dialog" id="modal-show" aria-hidden="true">
        <div class="modal-inner">
            <header id="modal-label" class="group">
                {{> preview_user_head }}
            </header>

            {{> preview_user_body }}
        </div>
    </section>
</template>

我的问题似乎与从另一个弹出窗口打开弹出窗口有关。

更新：以下代码将在removeDelay的持续时间内显示第1项，然后消失：

$.magnificPopup.open({
          items: [
            {
              src: $(".booking-preview"), // calendar/preview/booking/booking_preview.html
              type: 'inline'
            },
            {
              src: $(".user-preview"), // user/user.html
              type: 'inline'
            } ],
          removalDelay: 1500
        }, 0);

Answer 1

如果按钮在外面，则需要在bg上设置关闭点击为假

closeOnBgClick: false,

magnificPopup goTo in meteor关闭弹出窗口

1 个答案: