Dua pembangun datang gratis di HTML: <dialog> untuk keputusan yang memblokir dan atribut popover untuk toggle ringan. Keduanya tampil di top layer milik browser (di atas z-index berapa pun), menutup dengan Escape, dan mengatur fokus.

<dialog id="confirm">
  <p>Delete this page for good?</p>
  <button id="yes">Confirm</button>
  <button id="no">Cancel</button>
</dialog>
<button popovertarget="picker">Pick</button>
<div id="picker" popover>...</div>

Apa yang Anda hapus dengan mengadopsinya

  • Kode jebakan fokus: showModal() menjebak fokus saat terbuka dan mengembalikannya saat ditutup.
  • Pengkabelan escape dan backdrop: acara pembatalan/penutupan tiba dengan kabel.
  • Perlombaan senjata indeks-z dan div pembungkusnya: ::backdrop adalah pemilih, bukan elemen.

Yang mana yang harus dipilih

  1. Keputusan yang pembaca harus jawab lebih dulu: <dialog>.showModal().
  2. Kontrol yang membuka panel kecil: popover. Ini adalah desain non-modal.
  3. Keduanya: uji dengan keyboard terlebih dahulu, lalu dengan pembaca layar; pekerjaan platform mencakup sebagian besar, tidak semua, kasus edge.

Satu markup bug tidak dapat diperbaiki untuk Anda: data yang belum disimpan di belakang modal. Simpan otomatis sebelum membuka dialog, karena penutupan dapat terjadi melalui lebih banyak cara daripada yang direncanakan kode Anda. Itu adalah keadaan yang biasanya dilakukan dengan benar oleh modal lintingan tangan dan yang ini dilupakan.