magnificPopup goTo in meteor closes the popup

377 Views Asked by At

My problem is that when I use .goTo(1) the item 0 will just close. I can view the popup if I choose to open item 1 first time.

I import the templates for my popus:

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

Then I create a popup on a click which opens item 0 by default:

$.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);

now inside this popup there is a button to go to specified item:

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

Now why is this closing down the popup and not taking me to the next popup as it does if I choose to open item 1 by default?

The two popup templates looks like this:

item 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>

item 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>

My issue seem to be related to opening a popup from inside another popup.

Update: The following code will display item 1 for the duration of the removalDelay and then dissapear:

$.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);
1

There are 1 best solutions below

0
On

If button is outside, you need to set close on bg click to false

closeOnBgClick: false,