Popup

Навігація

Макет Вспливаючого вікна
Розмір Вспливаючого вікна
Методи застосунку Popup
Параметри Popup
Методи та властивості вспливаючого вікна
Керування спливаючим вікном за допомогою посилань
Події Вспливаючого вікна
Події DOM
Події екземплярів застосунку та Popup
Змінні CSS
Приклади

Вспливаюче вікно (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>