Magnific Popup: opening second popup with different options

Question

Using Magnific Popup is it possible to force a second popup, opened while the first one is still open, to accept new options? The documentation states the following:

"If popup is already opened - it'll just overwite the content (but old options will be kept)."

I'm opening the popup using the public open() method within some JavaScript. The issue I have is that my first popup is modal so has no close button added to it. The second popup shouldn't be modal but because it uses the options of the first rather than it's own, it is modal.

Here's a jsFiddle with the problem: jsfiddle

Here is an example:

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

You need to call $.magnificPopup.close() method before opening second popup, if you need it with different options.