VGModal

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

Базовые сценарии

Разметка, Data API, размеры и прокручиваемое содержимое.

Минимальная разметка и Data API

Триггер связывается с окном через data-vg-target. Закрытие работает кнопкой, backdrop и Escape без ручной инициализации.

HTML 
<button type="button" data-vg-toggle="modal" data-vg-target="#profile-modal">
  Открыть профиль
</button>

<div class="vg-modal fade" id="profile-modal" aria-hidden="true">
  <div class="vg-modal-dialog vg-modal-dialog-centered">
    <div class="vg-modal-content">
      <button type="button" class="vg-btn-close" data-vg-dismiss="modal"
        data-vg-target="#profile-modal" aria-label="Закрыть"></button>
      <div class="vg-modal-header"><h2 class="vg-modal-title">Профиль клиента</h2></div>
      <div class="vg-modal-body"><p>Карточка клиента готова к просмотру.</p></div>
      <div class="vg-modal-footer">
        <button type="button" data-vg-dismiss="modal" data-vg-target="#profile-modal">Готово</button>
      </div>
    </div>
  </div>
</div>
JavaScript 
// Дополнительная инициализация не требуется: используется Data API.
CSS 
.vg-modal {
  --vg-modal-width: 34rem;
  --vg-modal-padding: 0;
}

Размеры и прокрутка

Классы vg-modal-sm, vg-modal-lg и vg-modal-xl меняют максимальную ширину. Scrollable-диалог удерживает header и footer, пока body прокручивается.

HTML 
<button type="button" data-vg-toggle="modal" data-vg-target="#compact-modal">Компактное</button>
<button type="button" data-vg-toggle="modal" data-vg-target="#wide-modal">Широкое</button>

<div class="vg-modal fade" id="compact-modal" aria-hidden="true">
  <div class="vg-modal-dialog vg-modal-sm"><div class="vg-modal-content">…</div></div>
</div>

<div class="vg-modal fade" id="wide-modal" aria-hidden="true">
  <div class="vg-modal-dialog vg-modal-lg vg-modal-dialog-scrollable">
    <div class="vg-modal-content">…</div>
  </div>
</div>
JavaScript 
// Дополнительная инициализация не требуется: используется Data API.
CSS 
/* Дополнительные стили не требуются. */