UIPopup
Fork me on GitHub

Описание

UIPopup - это виджет, который позволяет выводить кастомное html содержимое в попап на страницу

Существует возможность задать размеры, элемент-родителя, контент, наличие управляющих кнопок и с помощью стилей настроить отображение.

Виджет состоит из двух компонентов - js логики UIPopup.js и стилей - UIPopup.css. При необходимости стили можно переопределить:

  1. Оболочку попапа:
    1. .popup-wrapper - оболочка попапа
    2. .popup-wrapper_fade - модификатор оболочки для отображения затемнения экрана
  2. Блок попапа
    1. .popup - блок попапа
    2. .popup__content - элемент попапа, хранящий контент
    3. .popup__close - элемент попапа, отвечающий за кнопку закрытия

Быстрый старт

Затеменение фона

Пример использования попапа с затемнением фона

new UIPopup('.js-popup-open-fade', { contentEl: '.js-popup-fade', isFadeScreen: true });

В данном случае, весь контент за попапом будет затемнен

Без затеменения

Подключаем UIPopup.js и UIPopup.css. Для создания попапа используем следующий код:

new UIPopup('.show-popup', { contentEl: '.js-popup' });

Здесь .show-popup - кнопка, класс - js-popup - элемент, который хранит контент попапа

Клик вне попапа или клик на крестике - закроет попап.

Параметры

Для работы с css-классами можно воспользоваться как готовым файлом UIPopup.css, так и написать свой, определив следующие классы:

  1. Оболочку попапа:
    1. .popup-wrapper - оболочка попапа
    2. .popup-wrapper_fade - модификатор оболочки для отображения затемнения экрана
  2. Блок попапа
    1. .popup - блок попапа
    2. .popup__content - элемент попапа, хранящий контент
    3. .popup__close - элемент попапа, отвечающий за кнопку закрытия

Конструктор принимает два аргумента - первый аргумент - селектор или jQuery объект, который попап будет считать активным элементом и при нажатии на этот элемент будет показывать попап

Второй аргумент - объект со следующими параметрами:

isFadeScreen - необходимо ли затемнять экран, вокруг popup (по умолчанию false), isCloseByClick - закрывать ли popup при клике вне попапа (по умолчанию true), isCloseButton - использовать ли кнопку для закрытия popup (по умолчанию true), contentEl - контент popupа, задается селектор, либо jQuery объект. Если был задан селектор, то DOM нода будет перенесена в контент попапа

Методы

UIPopup поддерживает один метод и одно событие:

trigger - триггерит дропдаун, либо скрывая, либо показывая попап trigger:popup - событие, которое слушает активный элемент и аналогично триггерит попап

UIPopup

UIPopup - Это виджет, позволяющий выводить html содержимое во viewport.

Данный popup занимает определенный размер экрана, указанный в стилях .popup

Для работы с css-классами можно воспользоваться как готовым файлом UIPopup.css, так и написать свой, определив следующие классы:

  1. Оболочку попапа:
    1. .popup-wrapper - оболочка попапа
    2. .popup-wrapper_fade - модификатор оболочки для отображения затемнения экрана
  2. Блок попапа
    1. .popup - блок попапа
    2. .popup__content - элемент попапа, хранящий контент
    3. .popup__close - элемент попапа, отвечающий за кнопку закрытия

UIPopup

UIPopup - Это виджет, позволяющий выводить html содержимое во viewport.

Данный popup занимает определенный размер экрана, указанный в стилях .popup

Для работы с css-классами можно воспользоваться как готовым файлом UIPopup.css, так и написать свой, определив следующие классы:

  1. Оболочку попапа:
    1. .popup-wrapper - оболочка попапа
    2. .popup-wrapper_fade - модификатор оболочки для отображения затемнения экрана
  2. Блок попапа
    1. .popup - блок попапа
    2. .popup__content - элемент попапа, хранящий контент
    3. .popup__close - элемент попапа, отвечающий за кнопку закрытия