Генератор модальных окон CSS

Что покрывает сгенерированный CSS

Код оформляет пять классов:

• .modal-backdrop: фиксированный полноэкранный слой, тёмный полупрозрачный фон (rgba(17, 24, 39, .62)), центрированная сетка и отступ 24 px вокруг панели.
• .modal-panel: белая карточка шириной min(100%, Npx), ваш радиус углов, мягкая тень и обрезанные углы.
• .modal-header: акцентная полоса толщиной 4 px в вашем цвете, ниже область заголовка с отступом 20 px 24 px.
• .modal-body: область содержимого с отступом 18 px 24 px.
• .modal-actions: выровненный вправо ряд кнопок с промежутком 10 px.

Соответствующая структура HTML

CSS ожидает такую разметку:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Подтвердить</h2>
    </div>
    <div class="modal-body">
      <p>Вы уверены, что хотите продолжить?</p>
    </div>
    <div class="modal-actions">
      <button>Отмена</button>
      <button>Продолжить</button>
    </div>
  </div>
</div>

Держите панель внутри фона: фон выступает фиксированным слоем, а панель центрируется внутри него. Чтобы открыть и закрыть окно, добавляйте и удаляйте фон из кода приложения либо переключайте его отображение.

Адаптация к маленьким экранам

Ширина панели ограничена через min(100%, Npx), поэтому значение 520 px на узком телефоне становится полной шириной окна просмотра за вычетом 24 px отступа фона. Ряд действий остаётся выровненным вправо, а длинное содержимое прокручивается вместе со страницей. Для типовых случаев media queries не нужны.

Примечания и ограничения

Генератор выдаёт только CSS. Он не включает JavaScript для открытия или закрытия окна, удержания фокуса клавиатуры или обработки клавиши ESC. Добавьте эту логику в своём приложении.

Шапка всегда сохраняет акцентную полосу толщиной 4 px; если она не нужна, удалите или перекрасьте это правило в скопированном коде.