Модальное окно

Модальное окно — окно поверх страницы, которое требует ответа: подтвердить запись на курс, ввести данные, прочитать предупреждение. Пока оно открыто, остальная страница затемнена и недоступна. daisyUI оформляет для этого стандартный HTML-тег <dialog>.

Окно и кнопка открытия

Тег <dialog> получает класс modal, а содержимое окна кладут в блок modal-box. Открывает окно метод showModal() — встроенный метод элемента <dialog>:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-72 p-4">
  <button class="btn btn-primary" onclick="document.getElementById('enroll').showModal()">
    Записаться
  </button>
</div>
 
<dialog id="enroll" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Запись на курс</h3>
    <p class="py-4">Курс «Основы HTML» за $19. Доступ откроется сразу после оплаты.</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Закрыть</button>
      </form>
    </div>
  </div>
</dialog>

Нажмите «Записаться» — страница затемнится, и по центру появится белое окно. Закрыть его можно кнопкой «Закрыть» или клавишей Escape.

Как работает закрытие

Форма с method="dialog" — особенность тега <dialog>: при отправке такой формы окно закрывается, и никаких запросов на сервер не уходит. Поэтому любая кнопка внутри этой формы закрывает окно. modal-action — часть компонента, которая прижимает кнопки к правому краю.

Класс	Что это
`modal`	Сам `<dialog>`: затемнение и центрирование
`modal-box`	Белое окно с отступами
`modal-action`	Ряд кнопок внизу окна
`modal-backdrop`	Невидимая подложка, щелчок по которой закрывает окно

Закрытие по щелчку на фон

Чтобы окно закрывалось при щелчке мимо него, после modal-box добавьте вторую форму с классом modal-backdrop:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-72 p-4">
  <button class="btn" onclick="document.getElementById('info').showModal()">О курсе</button>
</div>
 
<dialog id="info" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">JavaScript с нуля</h3>
    <p class="py-4">24 урока и 40 задач. Щёлкните мимо окна, чтобы закрыть его.</p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>Закрыть</button>
  </form>
</dialog>

Подложка занимает весь экран под окном, а её кнопка невидима — щелчок в любом месте вокруг окна закрывает его.

Положение окна

Модификатор modal-bottom прижимает окно к низу экрана — на телефоне так удобнее дотянуться пальцем. С префиксом Tailwind его меняют на обычное положение для больших экранов: class="modal modal-bottom sm:modal-middle".

Частая ошибка

Поставить кнопку «Закрыть» без формы:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-60 p-4">
  <button class="btn" onclick="document.getElementById('broken').showModal()">Открыть</button>
</div>
 
<dialog id="broken" class="modal">
  <div class="modal-box">
    <p>Попробуйте закрыть это окно кнопкой.</p>
    <div class="modal-action">
      <button class="btn">Закрыть</button>
    </div>
  </div>
</dialog>

Нажатие на «Закрыть» ничего не делает — окно уберёт только Escape: обычная кнопка не знает про окно. Кнопки, которые должны закрывать окно, кладите внутрь <form method="dialog"> или вызывайте в обработчике document.getElementById('enroll').close().

Спасибо, что читаете!