VGModal

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

Drag, resize и minimize

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

Перемещение, resize и сохранение состояния

Тяните окно за header, меняйте размер за края и углы. state сохраняет inline-геометрию в localStorage после закрытия.

<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-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">…</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();

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