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();