Модуль «Popup». Всплывающие (модальные) окна «Чертоги Фрилансера» v3.0.0

Этот функционал позволяет использовать всплывающие окна. Работа модуля состоит в следующем: пользователь нажимает на указанный элемент (по умолчанию это атрибут с указанным селектором data-popup=’selector’ ). При этом к тегу body добавляется класс popup-show . Также блокируется прокрутка страницы (можно отключить), фокусировка элементов «перелетает» на popup, с запоминанием предыдущего сфокусированного элемента на странице. Закрытие popup происходит при нажатии кнопки закрытия (по умолчанию элемент с атрибутом data-close ), по щелчку на “пустом месте” (не на popup), по нажатию кнопки ESC .

Подключение функционала

• [HTML] Подключить файл_popup.htm, после обертки wrapper , в HTML-файле страницы @@include(‘html/_popup.htm’,{}) , можно использовать снипет pop
• [SCSS] Подключите файл scss/base/popup.scss в файле scss/base.scss– раскомментировать строку @import ‘base/popup’;
• [JS] Подключите файл js/libs/popup.js в файле js/app.js– раскомментировать строку import ‘./libs/popup.js’

Использование функционала

Для того чтобы вызвать попап, необходимо на странице ввести объект с дата-атрибутом, в котором указан селектор (класс или id) всплывающего окна, на которое ссылаемся:

<a href="#" data-popup="#popup" class="link">Я открываю попап</a>

Далее открыть файл html/_popup.htm , раскомментировать HTML-код подготовки попапа, указать селектор (id или класс), по которому вызывается попап, изменить код под свои нужды.

В примере попап вызывается по id popup:

<div id="popup" aria-hidden="true" class="popup">
	<div class="popup__wrapper">
		<div class="popup__content">
			<button data-close type="button" class="popup__close">Закрыть</button>
			<div class="popup__text">

			</div>
		</div>
	</div>
</div>

Открытие YouTube видео в попапе

Чтобы открыть видеоролик в попапе, следует добавить к кнопке, вызывающей попап, атрибут data-popup-youtube , а в качестве значения указать код ролика. Также следует указать атрибут data-popup-youtube-place для объекта, в котором хотим вывести ролик (если атрибут data-popup-youtube-place не указан, ролик автоматически появится в объекте с классом popup__text ):

<button type="button" data-popup="#video" data-popup-youtube="6S5Zw2WuyFE">Видео</button>

 <div id="video" aria-hidden="true" class="popup">
	<div class="popup__wrapper">
		<div class="popup__content">
			<button data-close type="button" class="popup__close">Закрыть</button>
			<div data-youtube-place class="popup__text">

			</div>
		</div>
	</div>
</div>

Стили попапа можно писать и изменять в файле scss/base/popup.scss

Открытие попапа по хэшу

Чтобы открыть попап при открытии страницы, добавляем в адрес хэш с именем селектора попапа

https://code.site.ru/index.html#popup

Методы и события

Методы

Работать с попапом из любого места можно импортировать переменную flsModules :

import { flsModules } from "./modules.js";

Далее обратиться в класс popup и работать с методом, например open()

flsModules.popup.open('#popup')

где #popup селектор попапа

Внимание! После создания билда проекта (режим build) константа flsModules меняется на modules_flsModules . То есть запрос будет modules_flsModules .popup.open(‘#popup’);

События

В классе попапов существует ряд событий:

• beforePopupOpen – сработает перед открытием попапа
• afterPopupOpen – сработает после открытия попапа
• beforePopupClose – сработает перед открытием попапа
• afterPopupClose – сработает после открытия попапа

Чтобы работать с событием вешаем прослушивание на document

document.addEventListener("afterPopupOpen", function (e) {
	// Попап
	const currentPopup = e.detail.popup;
});