jquery.lhmodal v3.1.0

jquery.lhModal

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

Установка

npm install jquery.lhModal --save

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

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

Настройки

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

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

При открытии модального окна элементу 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.

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

Пример

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

События

Пример

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

Методы

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

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

Методы

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