Модалка

Использование

Всё содержимое обёрнуто в <form method="dialog">. Открытие — одна строка скрипта; закрытие, подложка и возврат фокуса скрипта не требуют.

<dialog class="inst-dialog" id="dlg">
  <form method="dialog">
    <div class="inst-dialog-head">
      <span class="inst-dialog-title">Заголовок</span>
      <button class="inst-btn inst-btn--sm inst-btn--ghost inst-dialog-close" type="submit" aria-label="Закрыть">✕</button>
    </div>
    <div class="inst-dialog-body">…</div>
    <div class="inst-dialog-foot inst-dialog-foot--end">
      <button class="inst-btn" type="submit">Закрыть</button>
    </div>
  </form>
</dialog>

Когда использовать

Устройство

Шапка и подвал не сжимаются (flex: none), прокручивается только тело. Из-за этого заголовок и кнопки остаются на месте на любой длине содержимого, а модалка не вырастает выше 80dvh.

Раскладка задаётся только открытому: .inst-dialog[open] { display: flex }. Безусловный display: flex показал бы модалку всегда — у <dialog> закрытое состояние это display: none.

Модалка — второй и последний носитель тени в ките. Первый — поповер.

Поведение

Закрытие без скрипта

Любая кнопка type="submit" внутри <form method="dialog"> закрывает модалку и передаёт своё значение в dialog.returnValue — обработчик клика не нужен ни на одной из них, включая крестик и «Отмена».

Блокировка прокрутки фона

showModal() делает фон инертным для кликов, но не останавливает прокрутку: колесо продолжает крутить страницу, и пользователь теряет место, к которому вернётся. Кит закрывает это одним правилом:

html:has(dialog:modal) { overflow: hidden; }

Селектор :modal, а не [open], и разница здесь принципиальная. Атрибут open стоит и на немодальном show(), у которого вся работа в том, чтобы не блокировать страницу. Пока правило смотрело на атрибут, немодальная панель замораживала прокрутку всего документа — и делала это с любым <dialog> на странице, даже без единого класса кита.

Останавливается пользовательская прокрутка — колесо, тачпад, клавиши. Программный scrollTo продолжает работать, и это правильно: приложению может понадобиться подвести фон к нужному месту, пока модалка открыта.

Плата известна: если прокручивается сам документ, в момент открытия исчезает полоса прокрутки и содержимое сдвигается вбок на её ширину. scrollbar-gutter здесь не спасает — резерв места действует при overflow: auto/scroll, а тут hidden.

/* Если у вас прокручивается именно документ */
html { scrollbar-gutter: stable; }

В приложении на оболочке документ не прокручивается вообще, поэтому сдвига нет и платить не за что. Кит не ставит scrollbar-gutter сам: на нескроллящемся экране это была бы пустая полоса в 10px у правого края.

JS

Открытие — одна строка. Всё остальное берёт на себя платформа.

document.getElementById('dlg').showModal();

Правила

Доступность

API

Связанное

Шторка Поповер Баннер Согласование Форма Оболочка