VGModal

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

Поведение и контекст

Статический backdrop, параметры триггера, hash и жизненный цикл.

Обязательное решение

backdrop: static и keyboard: false не закрывают окно случайным кликом или Escape. Компонент сообщает о попытке событием hidePrevented.

<div class="vg-modal fade" id="critical-modal"
  data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="vg-modal-dialog vg-modal-dialog-centered">
    <div class="vg-modal-content">…</div>
  </div>
</div>

// Дополнительная инициализация не требуется: используется Data API.

/* Дополнительные стили не требуются. */

Контекст триггера, hash и события

Параметр fields переносит значения триггера в элементы data-*. hash добавляет id окна в URL и поддерживает прямое открытие по ссылке.

<button type="button" data-vg-toggle="modal" data-vg-target="#client-modal"
  data-fields='[{"name":"client-name","value":"Анна Смирнова"}]'>
  Открыть Анну
</button>

<div class="vg-modal fade" id="client-modal" data-hash="true" aria-hidden="true">
  <div class="vg-modal-dialog">
    <div class="vg-modal-content">
      <div class="vg-modal-body"><strong data-client-name></strong></div>
    </div>
  </div>
</div>

const modal = document.querySelector('#client-modal');

modal.addEventListener('vg.modal.show', (event) => {
  console.log('Открытие из:', event.detail.relatedTarget);
});

modal.addEventListener('vg.modal.hidden', () => {
  console.log('Окно полностью закрыто');
});

/* Дополнительные стили не требуются. */