Компоненты

Модальные окна

Скачать компонент

Модальные окна полностью переписаны, сейчас используется делегирование как при открытии так и в самом модальном окне. Как следствие отсутствуют проблемы с динамическим добавлением элементов: кнопок вызова и самих модальных окон

В файле init-modals.js создаётся экземпляр класса Modals который записывается в переменную modals, им вы можете пользоваться по проекту при необходимости, так же он записывается в window.modals.

Используйте в разработке экспортируемую переменную modals, window сделан для бэкэнда

Модальные окна состоят из следующих файлов: ios-checker.js, focus-lock.js, scroll-lock.js, modals.js, init-modals.js, и modal.scss все файлы обязательны к переносу в проект! Так же у вас в проекте должно находится два утилитарных класса для блокировки страницы:

.scroll-lock-ios {
  position: fixed;

  overflow: hidden;
}

.scroll-lock {
  overflow: hidden;
}

Обязательные data атрибуты

data-open-modal="Имя модального окна"

Устанавливается на кнопке вызова модального окна

data-modal="Имя модального окна"

Устанавливается на модальном окне

data-close-modal

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

Не обязательные data атрибуты

data-focus

Устанавливается на том элементе который при открытии модального окна должен попасть в фокус, если не установить то в фокус попадёт первый интерактивный элемент в модальном окне. Данный data атрибут не относится к модулю модальных окон, он относится к модулю блокировки фокуса внутри модального окна

data-close-modal="back"

Устанавливается на элементе который должен вернуть к ранее закрытому модальному окну

Настройки

При создании экземпляра класса передаются настройки в формате ключ - "Имя модального окна" значение - объект

По умолчанию работают настройки по умолчанию. На всех ссылках и кнопках по умолчанию стоит preventDefault

stopPlay

Остановка проигрывание стандартных HTML элементов video и audio, по умолчанию true

lockFocus

Блокировка фокуса внутри модального окна, по умолчанию true. Если внутри модального окна нет фокусируемых элементов то при нажатии на клавишу tab или сочетание shift + tab действие по умолчанию будет отменено. Если внутри модального окна есть только один фокусируемый элемент то при нажатии на клавишу tab или сочетание shift + tab фокус с него уходить не будет.

startFocus

Блокировка фокуса внутри модального окна, по умолчанию true. Если поставить false то при открытии ни один из элементов модального окна не попадёт в фокус

focusBack

При закрытии модального окна возвращает фокус на тот элемент который находился в фокусе перед открытием модального окна, по умолчанию true

eventTimeout

Таймаут который отрабатывает при разблокировке скрола при закрытии, по умолчанию 400мс, добавлен для того что бы сгладить появление полосы прокрутки, убрать дёрганье модального окна + через данный таймаут снимаются и вешаются обработчики на модальное окно и документ это сделано для того что бы убрать баги связанные с добавлением лока фокуса внутри модального окна так как при зажатой клавише enter и при фокусе кнопки закрытия в модальном окне оно начинает открываться и закрываться что приводит к багам с появлением полосы прокрутки и тд

resetScrollPos

Сбрасывает положение прокрутки модалки при повторном открытии

openCallback

Callback при открытии, по умолчанию false

closeCallback

Callback при закрытии, по умолчанию false

const settings = {
  'default': {
    preventDefault: true,
    stopPlay: true,
    lockFocus: true,
    resetScrollPos: false,
    eventTimeout: 400,
    openCallback: false,
    closeCallback: false,
  },
  // modal-1 добавлен исключительно для примера при добавлении на проект ключ и обект записанный в нём нужно удалить
  'modal-1': {
    openCallback: () => console.log('Я отработаю при открытии modal-1'),
    closeCallback: () => console.log('Я отработаю при закрытии modal-1'),
  },
};

Методы

modals.open("Имя модального окна")

Открывает переданное модальное окно

modals.close("Имя модального окна")

Закрывает переданное модальное окно

Дополнения

Так же в файле инициализации есть закомментированный код. Он добавлен для открытия нового модального окна из колбэка закрытия. Судьба его пока не известна, так как кейс крайне редкий и все случаи которые пока были на практике перекрывает метод modals.open('Имя модального окна'), например показ модального окна с сообщением об успешной отправки формы в случае если сама форма находилась в модальном окне

// Здесь реализован пример открытия модалки через колбэк закрытия
// const openModalInCloseCallback = (name, context = this) => {
//   context._enableScrolling = false;
//   context._setSettings('default');
//   modals.open(name);
// };

// closeCallback() {
//   openModalInCloseCallback('modal-5');
// },

Добавление Youtube видео

Добавлена автоматическая остановка воспроизведения Youtube видео и при необходимости автозапуск воспроизведения при открытии

Для корректной работы iframe должен быть обёрнут в div с дата атрибутом data-iframe.

Важно!!! в src iframe в конце должно быть дописано ?enablejsapi=1.

Полный пример src: src="https://www.youtube.com/embed/FmzHq3U0UFE?enablejsapi=1". Примеры в модальных окнах 4 и 5

Для автовоспроизведения div нужно добавить дата атрибут data-auto-play. Пример в модальном окне 5