VGModal

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

Drag, resize и minimize

Перемещение, изменение размера, сохранение геометрии и сворачивание окна.

Перемещение, resize и полноэкранный режим

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

<button type="button" data-vg-toggle="modal" data-vg-target="#workspace-modal">Открыть рабочее окно</button>
<div class="vg-modal fade" id="workspace-modal"
  data-backdrop="false"
  data-drag-enable="true"
  data-drag-selector=".vg-modal-header"
  data-resize-enable="true"
  data-maximize="true"
  data-resize-min-width="320"
  data-resize-min-height="220"
  data-state-key="demo.workspace-modal">
  <div class="vg-modal-dialog">
    <div class="vg-modal-content">
      <button class="vg-btn-close" type="button" data-vg-dismiss="modal" aria-label="Закрыть"></button>
      <div class="vg-modal-header"><h2 class="vg-modal-title">Рабочее окно</h2></div>
      <div class="vg-modal-body">Меняйте размер окна и разворачивайте его на весь экран.</div>
    </div>
  </div>
</div>

// Геометрия сохраняется при закрытии и восстанавливается при следующем открытии.
// Чтобы сбросить её вручную:
localStorage.removeItem('demo.workspace-modal');

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

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

minimize добавляет кнопку в окно. После сворачивания появляется компактный элемент восстановления в правом нижнем углу страницы.

<div class="vg-modal fade" id="chat-modal"
  data-backdrop="false"
  data-minimize-enable="true"
  data-minimize-title="Чат поддержки"
  data-minimize-text="Оператор на связи">
  <div class="vg-modal-dialog"><div class="vg-modal-content">…</div></div>
</div>

const modal = VGModal.getOrCreateInstance('#chat-modal');
modal.minimize();
modal.restore();

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