lhmodal v4.0.2
lhmodal
Плагин для создания модальных окон. При открытии модального окна фокус
переводится на первый элемент формы (если отмечен флаг catchFocus: true
).
Плагин представляет собой ES6 class.
Установка
npm install lhmodal --save
##Подключение
import Lhmodal from 'lhmodal'
##Вызов
const myModal = new Lhmodal(selector, settings);
где selector
- это селектор форм которые необходимо валидировать, settings
- объект настроек
##Пример использования
HTML
<button id="show-modal">Показать модальное окна</button>
<div class="modal">
<div class="modal__content">
<button class="modal__close" >Закрыть</button>
<h3>Hello world</h3>
</div>
</div>
JavaScript
const button = document.getElementById('show-modal');
const myModal = new Lhmodal('.modal');
button.addEventListener('click', (e) => {
e.preventDefault();
myModal.show();
});
Настройки
Селекторы модального окна
В плагине реализована возможность изменения имен классов для каждого элемента модального окна и других сопутствующий элементов.
Опция | Значение по-умолчанию | Описание |
---|---|---|
modalContent | modal__content | Контейнер контентной части модального окна |
modalClose | modal__close | Кнопка закрытия |
bodyWithOpenModal | has-open-lhmodal | Класс добавляемый body для запрета прокрутки |
Пример
const myModal = new Lhmodal('.modal', {
classNames: {
modalContent: 'modal__content',
modalClose: 'modal__close',
bodyWithOpenModal: 'has-open-lhmodal',
}
});
Способы закрытия модального окна
Есть возможность изменить способы закрытия окна
Опция | Значение по-умолчанию | Описание |
---|---|---|
backdrop | true | Клик по заднему фону модального ок |
button | true | Клик по кнопка заданной через класс modalClose |
esc | true | Нажатие клавиши esc |
Пример
const myModal = new Lhmodal('.modal', {
closeVariant: {
backdrop: false,
esc: false,
}
});
Анимация
В данном плагине реализована возможность анимирования появления и исчезновения модального окна.
Анимация осуществаяется с помощью CSS3 Анимации. Параметры анимации указаны в файле
lhmodal.pcss
. Добавлены четыре эффекта: slideInTop
, slideInLeft
, slideOutRight
,
slideOutDown
.
Опция | Значение по-умолчанию | Описание |
---|---|---|
modalIn | modal_in | Класс добавляемый при появлении модального окна |
modalOut | modal_out | Класс добавляемый при исчезновении модального окна |
Пример
const myModal = new Lhmodal('.modal', {
classNames: {
modalIn: 'modal_in',
modalOut: 'modal_out',
}
});
События
Событие | Описание |
---|---|
lhmodal.show | Вызывается перед появлением модального окна |
lhmodal.shown | Вызывается после появления окна. |
lhmodal.close | Вызывается перед исчезновении модального окна |
lhmodal.closed | Вызывается после исчезновении окна. |
Пример
const myModal = new Lhmodal('.modal');
myModal.DOM.modal.addEventListener('lhmodal.show', () => {
console.log('show ');
});
Методы
Метод | Описание |
---|---|
show | Показывает модальное окно |
close | Скрывает модальное окно |
Пример
const myModal = new Lhmodal('.modal');
myModal.close();
Глобальные методы
Методы
Метод | Описание |
---|---|
closeAll | Скрывает все модальные окна |
Пример
import Lhmodal from 'lhmodal'
Lhmodal.closeAll();
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago