VGModal

Всплывающие окна

API и настройки

Программная сборка, публичные методы, параметры, события и CSS-переменные.

Программная сборка

build создаёт безопасный текст по умолчанию. HTML вставляется только при явных bodyHtml, titleHtml, footerHtml или общем html.

HTML
<button type="button" id="build-modal">Создать окно</button>
JavaScript
import { VGModal } from 'vgapp';

document.querySelector('#build-modal').addEventListener('click', (event) => {
  const modal = VGModal.build('release-modal', {
    title: 'Релиз готов',
    body: '<p>Production-сборка завершена.</p>',
    bodyHtml: true,
    footer: '<button data-vg-dismiss="modal" data-vg-target="#release-modal">Закрыть</button>',
    footerHtml: true,
    centered: true,
  });

  modal.show(event.currentTarget);
});
CSS
/* Дополнительные стили не требуются. */

Публичные методы

Статические фабрики и методы экземпляра текущей версии VGModal.

VGModal.getOrCreateInstance(element, params)

Возвращает существующий экземпляр или создаёт новый.

VGModal.build(id, params, callback)

Создаёт полную DOM-структуру или возвращает окно с таким id.

show(relatedTarget) / hide()

Открывает и закрывает окно.

toggle(relatedTarget)

Переключает обычное или свёрнутое состояние.

minimize(relatedTarget) / restore(relatedTarget)

Сворачивает и восстанавливает окно.

dispose()

Удаляет обработчики и связь экземпляра с элементом.

Основные параметры

В Data API вложенность записывается через дефис: resize.minWidth становится data-resize-min-width.

ПараметрТипНазначение
backdroptrue | false | "static"Фон, отсутствие фона или запрет закрытия кликом.
keyboardbooleanЗакрытие по Escape; при false вызывается hidePrevented.
hashbooleanСинхронизация id окна с location.hash.
fieldsarrayПодстановка значений в элементы с data-атрибутами.
ajaxobjectroute, target, method, loader, once и output.
drag / resizeboolean | objectПеремещение и изменение размера диалога.
stateboolean | objectСохранение геометрии; key переопределяет ключ localStorage.
minimizeboolean | objectСворачивание; title, text и label настраивают представление.
sizesobjectwidth задаёт --vg-modal-width, height — высоту dialog.

DOM-события

События всплывают от элемента .vg-modal и доступны через addEventListener.

vg.modal.show

До открытия; отменяемое, содержит relatedTarget.

vg.modal.shown

После завершения анимации открытия.

vg.modal.hide

До закрытия; отменяемое.

vg.modal.hidden

После полного закрытия.

hidePrevented.vg.modal

Попытка закрыть static-окно или Escape при keyboard: false.

vg.modal.loaded

После AJAX; detail содержит stats, data и relatedTarget.

vg.modal.minimize / minimized

До и после сворачивания.

vg.modal.restore / restored

До и после восстановления.

CSS-переменные

Переопределяйте переменные на конкретном .vg-modal, не копируя внутренние стили модуля.

--vg-modal-width

Максимальная ширина dialog.

--vg-modal-margin

Внешний отступ окна.

--vg-modal-padding

Внутренний отступ content.

--vg-modal-background-color

Фон content.

--vg-modal-color

Цвет текста.

--vg-modal-border-width / -style / -color

Рамка content.

--vg-modal-border-radius

Радиус content.

--vg-modal-box-shadow

Тень окна.

--vg-modal-transition

Переход dialog.

--vg-modal-fade-transform / -show-transform / -scale-transform

Позиции анимации и static-feedback.