Question

使用Magnific Popup可以强制第二个弹出窗口，在第一个弹出窗口仍处于打开状态时打开，以接受新选项吗？ documentation声明如下：

“如果弹出窗口已经打开 - 它只会覆盖内容（但旧的将保留选项。“

我在一些JavaScript中使用public open（）方法打开弹出窗口。我的问题是我的第一个弹出窗口是模态的，所以没有添加关闭按钮。第二个弹出窗口不应该是模态的，而是因为它使用第一个弹出窗口而不是自己的选项，它是模态的。

这是一个解决问题的方法：jsfiddle

以下是一个例子：

HTML

<div class="popup_dialog mfp-hide" id="modal_popup">
  <p>My modal popup</p>
</div>

<div class="popup_dialog mfp-hide" id="non_modal_popup">
  <p>My non modal popup, which should have a close button.</p>
</div>

CSS

.popup_dialog {
  background: none repeat scroll 0 0 #fff;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 30px;
  position: relative;
}

.mfp-hide {
    display:none;
}

的JavaScript

  $(document).ready(function () {
    // Open the first, modal popup
    $.magnificPopup.open({
      items: {
        src: $('#modal_popup')
      },
      type: 'inline',
      modal: true
    });

    // Open the second, non-modal popup
    setTimeout(function () {
      $.magnificPopup.open({
        items: {
          src: $('#non_modal_popup')
        },
        type: 'inline',
        modal: false,
        closeBtnInside: true
      });
    }, 2000);
  });

Answer 1

如果您需要使用不同的选项，则需要在打开第二个弹出窗口之前调用$.magnificPopup.close()方法。

Magnific Popup：打开第二个弹出窗口，提供不同的选项

1 个答案: