Главная
ФронтДок
Для разработки
Для разработки

Custom Popups / Попапы

ver.3.1.1
от 27.02.2025 11:49

Описание

Кастомный скрипт для всплывающих окон предоставляет удобный и функциональный способ взаимодействия с пользователем.

Особенности

  1. Закрытие попапа при клике на кнопку "Закрыть"
    Позволяет пользователю легко закрыть всплывающее окно, нажав на специальную кнопку, обычно расположенную в верхнем углу окна.
  2. Закрытие попапа по клику на задний фон
    Всплывающее окно закрывается при клике на затемненную область вокруг него, что улучшает пользовательский опыт.
  3. Закрытие попапа по нажатию клавиши Esc
    Окно можно закрыть, нажав клавишу Esc на клавиатуре, что добавляет удобства при работе с клавиатурой.
  4. Включение и отключение полос прокрутки у страницы
    При открытии всплывающего окна полосы прокрутки основной страницы могут быть отключены, чтобы предотвратить прокрутку фона, и включены снова при закрытии окна.

Codes

Html
CSS
SCSS
JS
По умолчанию
от 31.01.2025 13:32
Код
      <div class="popup popup-[НАЗВАНИЕ]">
    <div class="popup__inner">
        <div class="popup__overlay"></div>
        <div class="popup__content">
            <div class="popup__close"></div>
            <div class="popup__content-inner">
                <div class="popup__title">Получить план и стоимость лечения бесплатно!</div>
                ... СВОЙ_КОНТЕНТ ...
            </div>
        </div>
    </div>
</div>
Форма успешно отправлена
от 31.01.2025 13:32
Код
      <div id="popup-success" class="popup popup-success">
    <div class="popup__inner">
        <div class="popup__overlay"></div>
        <div class="popup__content">
            <div class="popup__close"></div>
            <div class="popup__content-inner">Спасибо! Мы&nbsp;получили Вашу заявку и&nbsp;свяжемся с&nbsp;Вами в&nbsp;ближайшее время!</div>
        </div>
    </div>
</div>
Форма ошибка отправки
от 31.01.2025 13:32
Код
      <div id="popup-error" class="popup popup-error">
    <div class="popup__inner">
        <div class="popup__overlay"></div>
        <div class="popup__content">
            <div class="popup__close"></div>
            <div class="popup__content-inner">Система защиты идентифицировала вас как Робота. Попробуйте отправить сообщение позже!</div>
        </div>
    </div>
</div>
Идет отправка письма
от 31.01.2025 13:32
Код
      <div class="popup popup-sending">
    <div class="popup__inner">
        <div class="popup__overlay"></div>
        <div class="popup__content">
            <div class="popup__content-inner">Идет отправка заявки</div>
        </div>
    </div>
</div>

Changelogs

v3.1.1
latest
от 27 Февраля 2025
  • Событие клика по кнопкам открытия попапа вынесено в отдельную функцию.
v3.1.0
  • Открытие политики в попапе если задано на кнопке "data-modal-popup" как "agreement"
  • Закрытие модалки по кнопке "ESC".
v2.0.0
  • Класс для открытия и закрытия попапа.
v1.0.0
  • Закрытие модалки по кнопке "закрыть".
  • Закрытие модалки по заднему фону.
  • Блокировка и разблокировка полос прокрутки у всей страницы.

Архив

ver.3.1.0
JS
от 31.01.2025 13:32
Как юзать
      new CustomPopup();
Код
      /**
 *
 * Custom Popups 3.1.0
 * открытие модальных окон
 *
 * Copyright 2025 Mihail Pridannikov
 *
 * Released on: January 31, 2025
 *
 */

window.CustomPopup = function(settings) {
    const BUTTON = document.querySelectorAll('[data-modal-popup]');
    const POPUPS = document.querySelectorAll('.popup');

    this.init = function() {
        BUTTON.forEach(button => {
            button.addEventListener('click', e => {
                e.preventDefault();
                let id = button.getAttribute('data-modal-popup');
                // console.log(id);
                this.disableScrolling();

                if (id === 'agreement') {
                    let href = e.currentTarget.getAttribute('href');
                    var http = new XMLHttpRequest();
                    http.open('GET', href);
                    http.onreadystatechange = function () {
                        var doc = new DOMParser().parseFromString(this.responseText, "text/html");
                        if (doc.querySelector('.page__content')) {
                            console.log(doc.querySelector('.page__content'))
                            document.querySelector('.popup-agreement .popup__content-inner').innerHTML = doc.querySelector('.page__content').innerHTML;
                        }
                    }
                    http.send(null);
                }

                this.openPopup(document.querySelector(`.popup-${id}`));
            });
        });
        POPUPS.forEach(popup => {
            popup.querySelector('.popup__overlay') ? popup.querySelector('.popup__overlay').addEventListener('click', e => this.handlerOnClickOverlay(e, popup)) : null;
            popup.querySelector('.popup__close') ? popup.querySelector('.popup__close').addEventListener('click', e => this.handlerOnClickButtonClose(e, popup)) : null;
        });
        document.body.addEventListener('keydown', e => this.handlerOnClickEsc(e, POPUPS), {passive: true});
    }
    this.handlerOnClickButtonClose = function(e, popup) {
        this.enableScrolling();
        this.closePopup(popup);
    }
    this.handlerOnClickOverlay = function(e, popup) {
        this.enableScrolling();
        this.closePopup(popup);
    }
    this.disableScrolling = function(e) {
        document.body.classList.add('js-scroll-locked');
    }
    this.enableScrolling = function(e) {
        document.body.classList.remove('js-scroll-locked');
    }
    this.openPopup = function(popup) {
        popup.classList.add('is-opened');
    }
    this.closePopup = function(popup) {
        popup.classList.remove('is-opened');
    }
    this.handlerOnClickEsc = function(e, popups) {
        popups.forEach(popup => {
            e.keyCode === 27 && this.closePopup(popup);
        });
    }

    this.init();
}
ver.2.0.0
JS
Как юзать
      new Popup();
Код
      window.Popup = function(settings) {
    const BUTTON = document.querySelectorAll('[data-modal-popup]');
    const POPUPS = document.querySelectorAll('.popup');

    this.init = function() {
        BUTTON.forEach(button => {
            button.addEventListener('click', e => {
                e.preventDefault();
                let id = button.getAttribute('data-modal-popup');
                this.disableScrolling();
                this.openPopup(document.querySelector(`.popup-${id}`));
            });
        });
        POPUPS.forEach(popup => {
            popup.querySelector('.popup__overlay') ? popup.querySelector('.popup__overlay').addEventListener('click', e => this.handlerOnClickOverlay(e, popup)) : null;
            popup.querySelector('.popup__close') ? popup.querySelector('.popup__close').addEventListener('click', e => this.handlerOnClickButtonClose(e, popup)) : null;
        });
    }
    this.handlerOnClickButtonClose = function(e, popup) {
        this.enableScrolling();
        this.closePopup(popup);
    }
    this.handlerOnClickOverlay = function(e, popup) {
        this.enableScrolling();
        this.closePopup(popup);
    }
    this.disableScrolling = function(e) {
        document.body.classList.add('js-scroll-locked');
    }
    this.enableScrolling = function(e) {
        document.body.classList.remove('js-scroll-locked');
    }
    this.openPopup = function(popup) {
        popup.classList.add('is-opened');
    }
    this.closePopup = function(popup) {
        popup.classList.remove('is-opened');
    }

    this.init();
}
ver.1.0.0
JS
Как юзать
      new Popup({
    button: '.button-[НАЗВАНИЕ]',
    popup: '.popup-[НАЗВАНИЕ]',
});
Код
      const Popup = function(settings) {
    const BUTTON = document.querySelectorAll(settings.button.split(/\.|#/gi)[1]);
    const POPUP = document.querySelector(settings.popup.split(/\.|#/gi)[1]);

    this.init = function() {
        BUTTON.forEach(button => {
            button.addEventListener('click', e => {
                e.preventDefault();
                this.disableScrolling();
                POPUP.classList.add('is-opened');
            });
        });
        POPUP.querySelector('.popup__close').addEventListener('click', e => this.handlerOnClickButtonClose(e));
        POPUP.querySelector('.popup__overlay').addEventListener('click', e => this.handlerOnClickOverlay(e));
    }
    this.handlerOnClickButtonClose = function() {
        this.enableScrolling();
        POPUP.classList.remove('is-opened');
    }
    this.handlerOnClickOverlay = function(e) {
        this.enableScrolling();
        POPUP.classList.remove('is-opened');
    }
    this.disableScrolling = function(e) {
        document.body.classList.add('js-scroll-locked');
    }
    this.enableScrolling = function(e) {
        document.body.classList.remove('js-scroll-locked');
    }

    this.init();
}
© Приданников Михаил
2020 - 2025