Skip to main content

Popup

Навігація

Вспливаюче вікно (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
object
app.popup.destroy(el)
знищити екземпляр Popup
  • el - HTMLElement or string — (with CSS Selector) or object. Елемент Popup або екземпляр Popup для знищення.
HTMLElement
app.popup.get(el)
отримати екземпляр Popup за елементом HTML
  • el - HTMLElement or string — (with CSS Selector). Popup елемент.
HTMLElement
app.popup.open(el, animate)
відкриває Popup
  • el - HTMLElement or string — (with CSS Selector) Елемент спливаючого вікна для відкриття
  • animate - boolean. — Відкривати з анімацією чи ні. Необов’язковий.
HTMLElement
app.popup.close(el, animate)
закриває спливаюче вікно
  • el - HTMLElement or string — (with CSS Selector) Елемент спливаючого вікна для закриття
  • animate - boolean — . Закривати анімацією чи ні. Необов’язковий
HTMLElement

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

Тепер давайте подивимося на список доступних параметрів, необхідних для створення Popup:
ПараметрЗа замовчуваннямОписТип
el
Елемент спливаючого вікна. Може бути корисним, якщо у вашому HTML уже є елемент Popup і ви хочете створити новий екземпляр за допомогою цього елемента
string
content
Повний спливаючий рядок макета HTML. Може бути корисним, якщо ви хочете динамічно створювати елемент Popup
string
backdrop
true
Вмикає фон спливаючого вікна (темний напівпрозорий шар ззаду)
boolean
backdropEl
HTML-елемент або рядковий CSS-селектор спеціального елемента фону
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
swipeHandler
Якщо не прийнято, то можна закрити все спливаюче вікно. Ви можете передати сюди HTML-елемент або рядок CSS-селектора спеціального елемента, який використовуватиметься як ціль гортання.( swipeToClose також має бути включено)
string
push
false
Якщо ввімкнути, він відкриватиме перегляд ззаду. Працює лише тоді, коли знаходиться верхня безпечна зона. Його також можна ввімкнути, додавши popup-push клас до елемента Popup.
boolean
containerEl
Елемент для модального монтування (за замовчуванням кореневий елемент застосунку)
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
Посилання на глобальний екземпляр застосунку
object
popup.el
HTML Елемент popup
HTMLElement
popup.$el
Екземпляр Dom64 ip popup елементом HTML
HTMLElement
popup.backdropEl
Елемент HTML фону
HTMLElement
popup.$backdropEl
Екземпляр Dom64 із фоновим елементом HTML
HTMLElement
popup.params
Параметри спливаючого вікна
object
popup.opened
Логічне значення, що вказує, чи відкрито спливаюче вікно чи ні
function
Методи
МетодОписТип
popup.open(animate)
Відкрити спливаюче вікно. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи відкривати його з анімацією чи ні
function
popup.close(animate)
Закрити спливаюче вікно. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи потрібно закривати його з анімаціє чи ні
function
popup.destroy()
Знищити спливаюче вікно
function
popup.on(event, handler)
Додати обробник подій
Event
popup.once(event, handler)
Додати обробник подій, який буде видалено після запуску
Event
popup.off(event, handler)
Видалити обробник подій
Event
popup.off(event)
Видалити всі обробники для вказаної події
Event
popup.emit(event, ...args)
Запустити подію на екземплярі застосунку
Event

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

Відкривати та закривати необхідні спливаючі вікна (якщо вони є в 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">

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

<div class="popup">

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

<div class="popup">

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

<div class="popup">

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

<div class="popup">

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

<div class="popup">

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

<div class="popup">

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

<div class="popup">

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

<div class="popup">

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

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

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

Змінні 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>