jquery.lhModal

Плагин для создания модальных окон. Позволяет открывать несколько модальных окон одновременно без появления 'косяков'

Установка

npm install jquery.lhModal --save

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

$('.modal').lhModal(); - инициализация плагина; $('.modal').lhModal('show'); - показать модальное окно;

Настройки

Селекторы модального окна

В плагине реализована возможность изменения имен классов для каждого элемента модального окна

Опция	Значение по-умолчанию	Описание
modalDialog	.modal__dialog	Фон модального окна при клике на который закрывается это окно
modalContent	.modal__content	Контейнер контентной части модального окна
modalClose	.modal__close	Кнопка закрытия

При открытии модального окна элементу body добавляется класс has-open-lhModal который запрещает прокрутку документа c помощью overfow:hidden. Изменить название класса можно с помощью опции bodyWithOpenModal.

Пример

$('#modal').lhModal({
    modalDialog: '.dialog',
    modalContent: '.content',
    modalClose: '.close',
    bodyWithOpenModal: 'body-ovh' //!тут указывается имя класса, без точки
 });

Анимация

В данном плагине реализована возможность анимирования появления и исчезновения модального окна. Анимация осуществаяется с помощью CSS3 Анимации. Параметры анимации указаны в файле jquery.lhModal.scss. Добавлены четыре эффекта: slideInTop, slideInLeft, slideOutRight, slideOutDown. Для точности срабатывания встроенных событий продолжительной анимации в CSS файле должна совпадать с опцией плагина duration.

Опция	Значение по-умолчанию	Описание
modalIn	.modal_in	CSS класс добавляемый при появлении модального окна
modalOut	.modal_out	CSS класс добавляемый при исчезновении модального окна
duration	500	Продолжительность анимации, в миллисекундах

Поддерживаются эффекты библиотеки animate.css. Для этого необходимо подключить саму библиотеку, выставить необходимое значение опции duration и в файле jquery.lhModal.scss классам .modal_in и .modal_out (или на тем которые были установлены) добавить свойства animation-name соответствующие названиям анимации библиотеки animate.css

Пример

$('#modal').lhModal({
    modalIn: '.modal_show',
    modalOut: '.modal_hide',
    duration: 1000,
 });

События

Событие	Описание
show.lhModal	Вызывается перед появлением модального окна
shown.lhModal	Вызывается после появления окна.
close.lhModal	Вызывается перед исчезновении модального окна
closed.lhModal	Вызывается после исчезновении окна.

Пример

$('#modal').on('show.lhModal', ()=>{
    console.log('show modal');
});

Методы

Метод	Описание
show	Показывает модальное окно
close	Скрывает модальное окно

Пример $('#modal').lhModal('show');

Глобальные методы

Методы

Метод	Описание
closeAll	Скрывает все модальные окна

Пример $.lhModal.closeAll();