Этот скрипт позволит тебе сделать поп-ап с закрытием по свайпу и как в Ios

Как сделать поп-ап как в Ios на Тильде?

(cвернуть)

Инструкция

Как установить

1. Создай на странице нужные тебе поп-ап блоки и укажи в настройках к ним любой класс (он должен начинаться с "uc-")

2. Укажи заданный тобой класс в генераторе

3. Укажи все нужные тебе параметры в генераторе кода и вставь полученный код в блок т123 под нужные тебе поп-ап блоки

- Заполняй поля в таком же формате, в каком полупрозрачным написаны ориентировочные значения в генераторе, ведь именно в таком виде он их ожидает получить

Важно!

undefined

Отчистить поля

Загрузить сохраненные значения

undefined

Для полосы

undefined

Скопировать код

<!--VORON--><!--VR38--><!--settings{"cls":"","res":"6000","line":"false","color":"#fff","width":"150px","height":"4px","radius":"2px","top":"15px","hideclose":"false"}settingsend-->

<script>
t_onReady(function () {
  t_onFuncLoad('t396_init', function () {
    if (window.innerWidth < 6000) {
    const popups = document.querySelectorAll('. .t-popup');

    popups.forEach((myElement) => {
        let touchStartY = 0;
        let touchCurrentY = 0;
        let isSwiping = false;

        myElement.addEventListener('touchstart', (e) => {
            touchStartY = e.changedTouches[0].screenY;
            isSwiping = true;
        });

        myElement.addEventListener('touchmove', (e) => {
            if (isSwiping) {
                touchCurrentY = e.changedTouches[0].screenY;
                const translateY = Math.max(0, touchCurrentY - touchStartY);
                myElement.style.transform = `translateY(${translateY}px)`;
            }
        });

        myElement.addEventListener('touchend', (e) => {
            isSwiping = false;
            const touchEndY = e.changedTouches[0].screenY;
            if (touchEndY > touchStartY + 50) {
                myElement.style.transition = 'transform 0.5s ease';
                myElement.style.transform = `translateY(${window.innerHeight}px)`;
                myElement.querySelector('.t-popup__close').click();
                setTimeout(() => {
                    myElement.style.transition = 'none';
                    myElement.style.transform = 'translateY(0)';
                }, 500);
            } else {
                myElement.style.transform = 'translateY(0)';
            }
        });

    })
    }
  })
})
</script>

- Обрати внимание что параметры нужно указывать прямо как написано для ориентира полупрозрачным. Т.е. не забудь "px"

Примеры работы модификации

Чтобы увидеть пример просто открой поп-ап по этой кнопке на мобильном разрешении

Примеры работы модификации

Открыть поп-ап

Это тестовый поп-ап, который можно закрыть свайпом вниз, и который будет иметь вот такую полосу на мобильных

Пример поп-апа