Skip to main content

Вспливаюче вікно (Popup)

Popup – це спливаюче вікно з будь-яким вмістом HTML, яке з’являється над основним вмістом застосунку. Спливаюче вікно, як і всі інші накладання, є частиною так званих «тимчасових переглядів».

Макет спливаючого вікна

Макет спливаючих вікон досить простий:
<body>
  ...
  <div class="popup">
    Будь-який  HTML контент розміщується тут
  </div>
</body>

Розмір спливаючого вікна

За замовчуванням спливаюче вікно має дещо інший розмір на телефонах і планшетах (iPad). На телефонах це повноекранний режим, а на планшетах – 630 пікселів по ширині та висоті. Якщо ви хочете зробити його повноекранним розміром на планшетах, вам слід додати додатковий клас popup-tablet-fullscreenдо необхідного спливаючого вікна:
<body>
  ...
  <!--Це спливаюче вікно має повноекранний розмір на планшетах -->
  <div class="popup popup-tablet-fullscreen">
    Будь-який HTML контент розміщується тут
  </div>
</body>

Методи застосунку спливаючого вікна

Давайте розглянемо пов’язані методи роботи застосунку Popup:
МетодОпис
app.popup.create(parameters)
створити екземпляр Popup

parameters - object. Об'єкт з параметрами Popup

Метод повертає створений екземпляр Popup

app.popup.destroy(el)
знищити екземпляр Popup

el - HTMLElement or string (with CSS Selector) or object. Елемент Popup або екземпляр Popup для знищення.

app.popup.get(el)
отримати екземпляр Popup за елементом HTML

el - HTMLElement or string (with CSS Selector). Popup елемент.

Метод повертає екземпляр Popup

app.popup.open(el, animate)
відкриває Popup

el - HTMLElement or string (with CSS Selector) Елемент спливаючого вікна для відкриття

animate - boolean. Відкривати з анімацією чи ні. Необов’язковий.

Метод повертає екземпляр Popup

app.popup.close(el, animate)
закриває спливаюче вікно

el - HTMLElement or string (with CSS Selector) Елемент спливаючого вікна для закриття

animate - boolean. Закривати анімацією чи ні. Необов’язковий

Метод повертає екземпляр Popup

Параметри спливаючого вікна

Тепер давайте подивимося на список доступних параметрів, необхідних для створення Popup:
ПараметрЗа замовчуваннямОписТип
el
Елемент спливаючого вікна. Може бути корисним, якщо у вашому HTML уже є елемент Popup і ви хочете створити новий екземпляр за допомогою цього елемента
HTMLElement
content
Повний спливаючий рядок макета HTML. Може бути корисним, якщо ви хочете динамічно створювати елемент Popup
string
backdrop
true
Вмикає фон спливаючого вікна (темний напівпрозорий шар ззаду)
boolean
backdropEl
HTML-елемент або рядковий CSS-селектор спеціального елемента фону
HTMLElement

string

backdropUnique
Якщо ввімкнено, він створює унікальний елемент фону виключно для цього модалу
boolean
closeByBackdropClick
true
Якщо ввімкнено, спливаюче вікно закриватиметься після натискання на фоні
boolean
closeOnEscape
false
Якщо ввімкнено, спливаюче вікно закриватиметься після натискання клавіші ESC на клавіатурі
boolean
animate
true
Чи відкривати/закривати спливаюче вікно з анімацією чи ні. Можна перезаписати в .open()і .close()методи
boolean
swipeToClose
false
Чи можна закрити спливаюче вікно за допомогою жесту. Можна дозволити true закривати спливаюче вікно, проводячи пальцем угору та вниз, або to-top(string), щоб дозволити лише гортати вгору, щоб закрити спливаюче вікно, або to-bottom(string), щоб дозволити лише гортати вниз, щоб закрити.
boolean

string

swipeHandler
Якщо не прийнято, то можна закрити все спливаюче вікно. Ви можете передати сюди HTML-елемент або рядок CSS-селектора спеціального елемента, який використовуватиметься як ціль гортання.( swipeToClose також має бути включено)
HTMLElement

string

push
false
Якщо ввімкнути, він відкриватиме перегляд ззаду. Працює лише тоді, коли знаходиться верхня безпечна зона. Його також можна ввімкнути, додавши popup-push клас до елемента Popup.
boolean
containerEl
Елемент для модального монтування (за замовчуванням кореневий елемент застосунку)
HTMLElement

string


ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var popup = app.popup.create({
  content: '<div class="popup">...</div>',
  on: {
    opened: function () {
      console.log('Popup opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку у popup властивості, щоб установити значення за замовчуванням для всіх спливаючих вікон. Наприклад:
var app = new Techno4({
  popup: {
    closeByBackdropClick: false,
  }
});
Якщо ви використовуєте автоматично ініціалізовані спливаючі вікна (наприклад, ви не створюєте їх через app.popup.create), можна передати всі доступні параметри спливаючих вікон через data-атрибути. Наприклад:
<!-- Pass parameters as kebab-case data attributes -->
<div class="popup" data-close-on-escape="true" data-swipe-to-close="to-bottom">
  ...
</div>

Методи та властивості спливаючих вікон

Отже, щоб створити Popup, ми повинні викликати:
var popup = app.popup.create({ /* parameters */ })
Після цього у нас є його ініціалізований екземпляр (як popup змінна у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
popup.app
Посилання на глобальний екземпляр застосунку
popup.el
HTML Елемент popup
popup.$el
Екземпляр Dom64 ip popup елементом HTML
popup.backdropEl
Елемент HTML фону
popup.$backdropEl
Екземпляр Dom64 із фоновим елементом HTML
popup.params
Параметри спливаючого вікна
popup.opened
Логічне значення, що вказує, чи відкрито спливаюче вікно чи ні
Методи
МетодОпис
popup.open(animate)
Відкрити спливаюче вікно. Де

animate - boolean (за замовчуванням true) - визначає, чи відкривати його з анімацією чи ні

popup.close(animate)
Закрити спливаюче вікно. Де

animate - boolean (за замовчуванням true) - визначає, чи потрібно закривати його з анімаціє чи ні

popup.destroy()
Знищити спливаюче вікно
popup.on(event, handler)
Додати обробник подій
popup.once(event, handler)
Додати обробник подій, який буде видалено після запуску
popup.off(event, handler)
Видалити обробник подій
popup.off(event)
Видалити всі обробники для вказаної події
popup.emit(event, ...args)
Запустити подію на екземплярі застосунку

Керуйте спливаючими вікнами за допомогою посилань

Відкривати та закривати необхідні спливаючі вікна (якщо вони є в DOM) можна за допомогою спеціальних класів і атрибутів даних у посиланнях:

● Щоб відкрити спливаюче вікно, нам потрібно додати клас « popup-open » до будь-якого елемента HTML (бажано для посилання)

● Щоб закрити спливаюче вікно, нам потрібно додати клас « popup-close » до будь-якого елемента HTML (бажано для посилання)

● Якщо у вас більше одного спливаючого вікна в DOM, вам потрібно вказати відповідне спливаюче вікно за допомогою додаткового атрибута data-popup=".my-popup" для цього елемента HTML

Відповідно до примітки вище:

<!-- В атрибуті data-popup ми вказуємо CSS-селектор спливаючого вікна, яке потрібно відкрити -->
<p><a href="#" data-popup=".my-popup" class="popup-open">Open Popup</a></p>

<!-- І десь у DOM -->
<div class="popup my-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Popup</div>
          <div class="right">
            <!-- Посилання для закриття спливаючого вікна -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        ...
      </div>
    </div>
  </div>
  ...
</div>

Події Popup

Popup запускатиме такі події DOM у спливаючому елементі та події в застосунку та екземплярі спливаючого вікна:

Події DOM

ПодіяОб'єктОпис
popup:open
Елемент Popup

<div class="popup">

Подію буде запущено, коли спливаюче вікно розпочне свою початкову анімацію
popup:opened
Елемент Popup

<div class="popup">

Подію буде запущено після того, як Popup завершить свою початкову анімацію
popup:close
Елемент Popup

<div class="popup">

Подія буде запущена, коли спливаюче вікно почне завершувати анімацію
popup:closed
Елемент Popup

<div class="popup">

Подію буде запущено після завершення анімації закриття Popup
popup:swipestart
Елемент Popup

<div class="popup">

Подія буде ініційована на початку взаємодії «проведіть пальцем, щоб закрити» (коли користувач щойно почав перетягувати спливаюче вікно)
popup:swipemove
Елемент Popup

<div class="popup">

Подія буде ініційована під час взаємодії з переміщенням, щоб закрити
popup:swipeend
Елемент Popup

<div class="popup">

Подія буде ініційована після запуску, щоб закрити
popup:swipeclose
Елемент Popup

<div class="popup">

Подія буде ініційована, коли спливаюче вікно закриється свайпом
popup:beforedestroy
Елемент Popup

<div class="popup">

Подія буде запущена безпосередньо перед знищенням екземпляра Popup

Події екземплярів застосунку та спливаючих вікон

Екземпляр спливаючого вікна генерує події як для власного екземпляра, так і для екземпляра застосунку. Події екземплярів застосунку мають ті самі назви з префіксом popup.
ПодіяАргументОписОб'єкт
open
popup
Подію буде запущено, коли спливаюче вікно розпочне свою початкову анімацію. Як аргумент обробник події отримує спливаюче вікно
popup
popupOpen
popup
Подію буде запущено, коли спливаюче вікно розпочне свою початкову анімацію. Як аргумент обробник події отримує спливаюче вікно
app
opened
popup
Подію буде запущено після того, як Popup завершить свою початкову анімацію. Як аргумент обробник події отримує спливаюче вікно
popup
popupOpened
popup
Подію буде запущено після того, як Popup завершить свою початкову анімацію. Як аргумент обробник події отримує спливаюче вікно
app
close
popup
Подія буде запущена, коли спливаюче вікно почне завершувати анімацію. Як аргумент обробник події отримує спливаюче вікно
popup
popupClose
popup
Подія буде запущена, коли спливаюче вікно почне завершувати анімацію. Як аргумент обробник події отримує спливаюче вікно
app
closed
popup
Подію буде запущено після завершення анімації закриття Popup. Як аргумент обробник події отримує спливаюче вікно
popup
popupClosed
popup
Подію буде запущено після завершення анімації закриття Popup. Як аргумент обробник події отримує спливаюче вікно
app
beforeDestroy
popup
Подія буде запущена безпосередньо перед знищенням екземпляра Popup. Як аргумент обробник події отримує спливаюче вікно
popup
popupBeforeDestroy
popup
Подія буде запущена безпосередньо перед знищенням екземпляра Popup. Як аргумент обробник події отримує спливаюче вікно
app
swipeStart
popup
Подія буде ініційована на початку взаємодії «проведіть пальцем, щоб закрити» (коли користувач щойно почав перетягувати спливаюче вікно)
popup
popupSwipeStart
popup
Подія буде ініційована на початку взаємодії «проведіть пальцем, щоб закрити» (коли користувач щойно почав перетягувати спливаюче вікно)
app
swipeMove
popup
Подія буде ініційована під час взаємодії з переміщенням, щоб закрити
popup
popupSwipeMove
popup
Подія буде ініційована під час взаємодії з переміщенням, щоб закрити
app
swipeEnd
popup
Подія буде ініційована, коли спливаюче вікно закриється свайпом
popup
popupSwipeEnd
popup
Подія буде ініційована, коли спливаюче вікно закриється свайпом
app
swipeClose
popup
Подія буде ініційована, коли спливаюче вікно закриється свайпом
popup
popupSwipeClose
popup
Подія буде ініційована, коли спливаюче вікно закриється свайпом
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-popup-border-radius: 0px;
  --t4-popup-tablet-width: 630px;
  --t4-popup-tablet-height: 630px;
  --t4-popup-push-offset: var(--t4-safe-area-top);
  /*
  --t4-popup-tablet-border-radius: var(--t4-popup-border-radius);
  */
}
.ios {
  --t4-popup-tablet-border-radius: 5px;
  --t4-popup-transition-duration: 400ms;
  --t4-popup-transition-timing-function: initial;
  --t4-popup-push-border-radius: 10px;
}
.md {
  --t4-popup-tablet-border-radius: 28px;
  --t4-popup-transition-duration: 600ms;
  --t4-popup-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
  --t4-popup-push-border-radius: 28px;
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Popup</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Popup is a modal window with any HTML content that pops up over App's main content. Popup as all other
          overlays is part of so called "Temporary Views".</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup">Open Popup</a>
        </p>
        <p>
          <a class="button button-fill" @click=${createPopup}>Create Dynamic Popup</a>
        </p>
      </div>
      <div class="block-title">Swipe To Close</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>Popup can be closed with swipe to top or bottom:</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-swipe">Swipe To Close</a>
        </p>
        <p>Or it can be closed with swipe on special swipe handler and, for example, only to bottom:</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-swipe-handler">With Swipe
            Handler</a>
        </p>
      </div>
      <div class="block-title">Push View</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>Popup can push view behind. By default it has effect only when "safe-area-inset-top" is more than zero (iOS
          fullscreen webapp or iOS cordova app)</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-push">Popup Push</a>
        </p>
      </div>
    </div>
    <div class="popup demo-popup">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Popup Title</div>
            <div class="right"><a class="link popup-close">Close</a></div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p>Here comes popup. You can put here anything, even independent view with its own navigation. Also not,
              that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is fullscreen.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
              neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
              viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
              tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
              nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis
              elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
            </p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
              pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
              tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
              vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
              convallis blandit dui sit amet, gravida adipiscing libero.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="popup demo-popup-push">
      <div class="view view-init">
        <div class="page page-with-navbar-large">
          <div class="navbar navbar-large navbar-transparent">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Push Popup</div>
              <div class="right"><a class="link popup-close">Close</a></div>
              <div class="title-large">
                <div class="title-large-text">Push Popup</div>
              </div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
                neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
                viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
                tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare
                consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed
                libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a
                faucibus lectus.</p>
              <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
                pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
                tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
                vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit
                in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
                convallis blandit dui sit amet, gravida adipiscing libero.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
                neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
                viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
                tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare
                consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed
                libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a
                faucibus lectus.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popup demo-popup-swipe">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Swipe To Close</div>
            <div class="right"><a class="link popup-close">Close</a></div>
          </div>
        </div>
        <div class="page-content">
          <div style="height: 100%" class="display-flex justify-content-center align-items-center">
            <p>Swipe me up or down</p>
          </div>
        </div>
      </div>
    </div>
    <div class="popup demo-popup-swipe-handler">
      <div class="page">
        <div class="swipe-handler"></div>
        <div class="page-content">
          <div class="block-title block-title-large">Hello!</div>
          <div class="block block-strong-ios block-outline-ios">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
              neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
              viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
              tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
              nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis
              elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
            </p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
              pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
              tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
              vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
              convallis blandit dui sit amet, gravida adipiscing libero.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
              neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
              viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
              tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
              nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis
              elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
            </p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
              pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
              tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
              vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
              convallis blandit dui sit amet, gravida adipiscing libero.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $onMounted, $onBeforeUnmount }) => {
    let popup;
    let popupSwipe;
    let popupSwipeHandler;
    let popupPush;

    const createPopup = () => {
      // Create popup
      if (!popup) {
        popup = $t4.popup.create({
          content: /*html*/`
            <div class="popup">
              <div class="page">
                <div class="navbar">
                  <div class="navbar-bg"></div>
                  <div class="navbar-inner">
                    <div class="title">Dynamic Popup</div>
                    <div class="right"><a  class="link popup-close">Close</a></div>
                  </div>
                </div>
                <div class="page-content">
                  <div class="block">
                    <p>This popup was created dynamically</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
                  </div>
                </div>
              </div>
            </div>
          `
        });
      }
      // Open it
      popup.open();
    }

    $onMounted(() => {
      popupSwipe = $t4.popup.create({
        el: '.demo-popup-swipe',
        swipeToClose: true,
      });
      popupSwipeHandler = $t4.popup.create({
        el: '.demo-popup-swipe-handler',
        swipeToClose: 'to-bottom',
        swipeHandler: '.swipe-handler'
      });
      popupPush = $t4.popup.create({
        el: '.demo-popup-push',
        swipeToClose: true,
        push: true,
      });
    })

    $onBeforeUnmount(() => {
      // Destroy popup when page removed
      if (popup) popup.destroy();
      if (popupSwipe) popupSwipe.destroy();
      if (popupSwipeHandler) popupSwipeHandler.destroy();
      if (popupPush) popupPush.destroy();
    })

    return $render;
  }
</script>