Описание
UIPopup - это виджет, который позволяет выводить кастомное html содержимое в попап на страницу
Существует возможность задать размеры, элемент-родителя, контент, наличие управляющих кнопок и с помощью стилей настроить отображение.
Виджет состоит из двух компонентов - js логики UIPopup.js и стилей - UIPopup.css. При необходимости стили можно переопределить:
-
Оболочку попапа:
- .popup-wrapper - оболочка попапа
- .popup-wrapper_fade - модификатор оболочки для отображения затемнения экрана
-
Блок попапа
- .popup - блок попапа
- .popup__content - элемент попапа, хранящий контент
- .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, так и написать свой, определив следующие классы:
-
Оболочку попапа:
- .popup-wrapper - оболочка попапа
- .popup-wrapper_fade - модификатор оболочки для отображения затемнения экрана
-
Блок попапа
- .popup - блок попапа
- .popup__content - элемент попапа, хранящий контент
- .popup__close - элемент попапа, отвечающий за кнопку закрытия
Конструктор принимает два аргумента - первый аргумент - селектор или jQuery объект, который попап будет считать активным элементом и при нажатии на этот элемент будет показывать попап
Второй аргумент - объект со следующими параметрами:
isFadeScreen - необходимо ли затемнять экран, вокруг popup (по умолчанию false),
isCloseByClick - закрывать ли popup при клике вне попапа (по умолчанию true),
isCloseButton - использовать ли кнопку для закрытия popup (по умолчанию true),
contentEl - контент popupа, задается селектор, либо jQuery объект.
Если был задан селектор, то DOM нода будет перенесена в контент попапа
Методы
UIPopup поддерживает один метод и одно событие:
trigger - триггерит дропдаун, либо скрывая, либо показывая попап
trigger:popup - событие, которое слушает активный элемент и аналогично триггерит попап