Модальные окна: когда они нужны и как сделать правильно

<button class="button" type="button" data-open="callback">Перезвоните мне</button>

<dialog class="dialog" id="callback" aria-labelledby="callback-title">
  <form class="dialog__body" method="dialog">
    <h2 id="callback-title">Перезвоним вам</h2>
    <button class="dialog__close" value="cancel" formnovalidate aria-label="Закрыть">✕</button>

    <label for="callback-phone">Телефон</label>
    <input id="callback-phone" name="phone" type="tel" autocomplete="tel" required>

    <div class="dialog__actions">
      <button class="button button--ghost" value="cancel" formnovalidate>Отмена</button>
      <button class="button" value="send">Жду звонка</button>
    </div>
  </form>
</dialog>

.dialog {
  width: min(100% - 2rem, 34rem);
  padding: 0;            /* отступы внутри: клик по самому dialog — это клик по подложке */
  border: 0;
  border-radius: var(--radius-lg);
}

.dialog__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.dialog::backdrop {
  background: rgb(23 24 23 / 0.6);
}

/* Страница позади не прокручивается */
html:has(.dialog[open]) {
  overflow: hidden;
}

/* На телефоне: шторка снизу, кнопки во всю ширину, главная сверху */
@media (max-width: 47.99rem) {
  .dialog {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .dialog__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
  }
}

// Кнопка открывает своё окно; после закрытия фокус возвращается на кнопку
for (const opener of document.querySelectorAll('[data-open]')) {
  const dialog = document.getElementById(opener.dataset.open);
  opener.addEventListener('click', () => {
    dialog.showModal();
    dialog.addEventListener('close', () => opener.focus(), { once: true });
  });
}

// Клик по подложке закрывает окно — если ничего не введено
for (const dialog of document.querySelectorAll('dialog')) {
  dialog.addEventListener('click', (event) => {
    const typed = [...dialog.querySelectorAll('input, textarea')].some((field) => field.value);
    if (event.target === dialog && !typed) dialog.close('cancel');
  });
}