VGModal

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

AJAX-контент

Загрузка содержимого при открытии, loader, once и событие loaded.

Загрузка при первом открытии

VGModal делает GET-запрос после shown, показывает loader и вставляет response в target. once: true сохраняет результат для следующих открытий.

Запрос ещё не выполнялся.
HTML
<div class="vg-modal fade" id="remote-modal"
  data-ajax-route="/api/modal/demo?project=CRM"
  data-ajax-target="#remote-modal-content"
  data-ajax-loader="true"
  data-ajax-once="true"
  data-ajax-output="true">
  <div class="vg-modal-dialog">
    <div class="vg-modal-content">
      <div class="vg-modal-body" id="remote-modal-content"></div>
    </div>
  </div>
</div>
JavaScript
const modal = document.querySelector('#remote-modal');

modal.addEventListener('vg.modal.loaded', (event) => {
  console.log(event.detail.stats, event.detail.data);
});
CSS
/* Дополнительные стили не требуются. */

Контракт тестового endpoint

Маршрут GET /api/modal/demo принимает необязательный query-параметр project и возвращает JSON с HTML-фрагментом в поле response. В production используйте собственный endpoint с тем же ожидаемым форматом либо верните текстовый HTML-ответ.