Как сделать модальное окно

Короткий ответ

Тег dialog и одна строка JavaScript для открытия:

<button onclick="offer.showModal()">Show the offer</button>
 
<dialog id="offer">
  <p>Get 20% off your first order!</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

showModal() показывает окно поверх страницы, делает остальную страницу недоступной для клика и закрывает окно по клавише Esc. Форма с method="dialog" закрывает окно при отправке — JavaScript для закрытия не нужен.

Оформление

Окно оформляется как обычный блок, а затемнение за ним — через псевдоэлемент ::backdrop:

<style>
  .modal { border: none; border-radius: 16px; padding: 24px; max-width: 300px; box-shadow: 0 10px 40px rgb(0 0 0 / 30%); }
  .modal::backdrop { background: rgb(0 0 0 / 50%); backdrop-filter: blur(3px); }
</style>
 
<button onclick="signup.showModal()">Subscribe</button>
<dialog id="signup" class="modal">
  <h3 style="margin-top: 0;">Stay in touch</h3>
  <form method="dialog"><button>No thanks</button></form>
</dialog>

Закрытие по клику снаружи

Атрибут closedby="any" закрывает окно кликом по затемнённому фону. Его поддерживают ещё не все браузеры; Esc и кнопка работают везде.

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

Показывают окно атрибутом open или через show() и удивляются, что фон не затемняется, а страница под окном остаётся кликабельной. Это немодальный вариант. Для настоящего модального окна вызывайте именно showModal().