Этот функционал позволяет использовать модульные (вытекающие) окна. Работа модуля состоит в следующем: пользователь нажимает на указанный элемент (по умолчанию это атрибут с указанным именем попапа data-fls-popup-link=’popup`s name’ ). При этом в тег body добавляется атрибут data-fls-popup-open . Также блокируется прокрутка страницы (можно отключить), фокусировка элементов «перелетает» на popup, с запоминанием предыдущего сфокусированного элемента на странице. Закрытие popup происходит при нажатии кнопки закрытия (по умолчанию элемент с атрибутом data-fls-popup-close ), по щелчку на пустом месте (не на popup), по нажатию кнопки ESC .
HTML/SCSS/JS файлы компонента находятся в папке src/components/layout/popup/
Использование компонента
С помощью include подключаем HTML-файл компонента к нашей HTML-странице (можно воспользоваться снопом pop):
<include src="@components/layout/popup/popup.html"></include>В файле src/components/layout/popup/popup.html уже есть базовый HTML-код одного попапа, важно, что объект имеет атрибут data-fls-popup со значением popup. Это значение и есть именем попапа.
Вы можете создавать еще модальные окна, придающие им уникальные имена.
Для того чтобы выложить открытие того или иного окна добавьте объекту (ссылка, кнопка и т.д.) атрибут data-fls-popup-link и в зачении укажите имя попа, который нужно открыть (можно воспользоваться снипетом pl ).
Например по клику на эту ссылку откроется окно с именем popup :
<a href="#" data-fls-popup-link="popup">Всплывающее окно</a>Дополнительные возможности
Компонент «Модальное окно» умеет открывать popup по хэшу. Например, по этому адресу откроется окно с именем popup :
http://localhost:1111/#всплывающее окно
Также есть возможность открывать YouTube-видео в модальном окне с автоматическим запуском воспроизведения. Для этого добавьте атрибут data-fls-popup-youtube, к объекту открывающему попап, со значением ID YouTube-видео.
Например, если YouTube-видео имеет такую ссылку https://www.youtube.com/watch?v=fWeFxo1eWi8 то его ID это fWeFxo1eWi8. Именно этот код и указывается в атрибуте:
<a href="#" data-fls-popup-link="popup" data-fls-popup-youtube="TzqNA7FoEjY">Всплывающее окно</a>Если ваше модальное окно открывается, например, по хешу или после отправки формы, то атрибут data-fls-popup-youtube с ID видео добавьте к главному тегу попапа в файле src/components/layout/popup/popup.html:
<div data-fls-popup="popup" data-fls-popup-youtube="TzqNA7FoEjY" aria-hidden="true" class="popup">.....</div>В обоих случаях видео будет интегрировано в объект с атрибутом data-fls-popup-content с заменой всего содержимого, если возникает необходимость вывести видео в каком-нибудь другом месте модального окна, создайте объект и добавьте ему атрибут data-fls-popup-youtube-place
Методы и события
Методы
Для того чтобы вызвать тот или иной метод компонента, обращайтесь к нему через глобальную переменную window.flsPopup.
Например, следующее обращение откроет попап с именем popup:
window.flsPopup.open('всплывающее окно')События
В классе попапов существует ряд событий:
- beforePopupOpen – сработает перед открытием попапа
- afterPopupOpen – сработает после открытия попапа
- beforePopupClose – сработает перед открытием попапа
- afterPopupClose – сработает после открытия попапа
Чтобы работать с событием вешаем прослушивание на document
document.addEventListener("afterPopupOpen", function (e) {// Popupconst currentPopup = e.detail.popup;})