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

Общая информация

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

<button type="button" class="btn" id="modal-trigger1" data-modal="#modal1">Modal</button>

<div class="modal" id="modal1">
    <div class="modal-wrapper">
        <div class="modal-content">
            <div class="modal-header">Название окна</div>

            <div class="modal-body">
                Содержимое модального окна
            </div>

            <div class="modal-footer">
                <button class="btn btn-transparent" data-modal-close>Закрыть</button>
            </div>
        </div>
    </div>
</div>

Пример работы кода выше

Модальные окна работают через Javascript и объект PipUI.Modal

При использовании открытия модального окна через атрибуты, экземпляр класса PipUI.Modal создается автоматически, как показано в примере выше и хранится в PipUI.Storage

Javascript

Инициализация и управление может быть произведено напрямую через Javascript. Для того, чтобы инициализировать модальное окно, требуется создать экземпляр класс PipUI.Modal и передать в него необходимые параметры.

Класс PipUI.Modal принимает 3 параметра

1. HTMLElement или строковая ссылка на элемент

2. Объект опций

3. Стратегия создания (true/false)

<div id="mymodal"></div>

<script>
let modal = new PipUI.Modal('#mymodal', {
    header: 'My modal',
    body: 'Lorem ipsum'
}, true)
</script>

Если вы сформирует HTML код модального окна самостоятельно и зададите только первый параметр, то все параметры будут извлечены из HTML кода автоматически.

Опции

// Выводить в консоль отладку
debug: false

// Заголовок модального окна. Можно использовать HTML
header: ''

// Тело модального окна. Можно использовать HTML
body: ''

// Нижняя часть модального окна. Можно использовать HTML
footer: ''

// Функция обратного вызова, срабатываемая при открытии модального окна
showCallback: undefined

// Функция обратного вызова, срабатываемая при закрытии модального окна
hideCallback: undefined

// Функция обратного вызова, срабатываемая при завершении открытия модального окна
showedCallback: undefined

// Функция обратного вызова, срабатываемая при завершении закрытия модального окна
hidedCallback: undefined

// Функция обратного вызова, срабатываемая при стратегии обновления
updateCallback: undefined

// Функция обратного вызова, срабатываемая при стратегии инициализации
initCallback: undefined

// Класс открытого модального окна
targetActiveClass: 'modal-active'

// Настройка шаблона модального окна при инициализации по стратегии создания
templates: {
        // Основной код модального окна
	modal: '<div class="modal"><div class="modal-wrapper"><div class="modal-content"></div></div></div>'
	
	// Код заголовка модального окна
	header: '<div class="modal-header"></div>'
	
	// Тело модального окна
	body: '<div class="modal-body"></div>'
	
	// Нижняя часть модального окна
	footer: '<div class="modal-footer"></div>'
	
	// Код кнопки закрытия модального окна
	close: '<a href="#" rel="nofollow" data-modal-close class="modal-close"></a>'
}

Методы

let modal = new PipUI.Modal('#mymodal');

modal.getID() // Вернет уникальный идентификатор модального окна.
// Он так же хранится в блоке .modal

modal.setOptions(object) // Изменить опции модального окна. DOM не будет изменен
// до вызова метода modal.update()

modal.getOptions() // Получить опции модального окна

modal.update() // Отрендерит модальное окно заново из текущих опций

modal.isOpen() // Открыто ли модальное окно

modal.hide(callback) // Скрыть модальное окно
// Параметр callback является приоритетной функцией обратного
// вызова при начале скрытия, если она задана и через опции

modal.show(callback) // Отобразить модальное окно
// Параметр callback является приоритетной функцией обратного
// вызова при начале отображения, если она задана и через опции

События

Триггер	Описание	Инициатор
update-modal-pipui	Срабатывает при стратегии обновления	.modal
init-modal-pipui	Срабатывает при стратегии инициализации	.modal
show-modal-pipui	Срабатывает при начале открытия модального окна	.modal
hide-modal-pipui	Срабатывает при начале закрытия модального окна	.modal
showed-modal-pipui	Срабатывает при окончании открытия модального окна	.modal
hided-modal-pipui	Срабатывает при окончании закрытия модального окна	.modal