Membuka dan Menutup Dialog

Membuka dialog hanya butuh satu baris showModal(). Yang membedakan dialog profesional adalah mekanik di sekitarnya: bagaimana dialog membawa nilai hasil, bagaimana halaman tahu dialog selesai, dan bagaimana form di dalamnya bisa menutup dialog tanpa skrip. Chapter ini membahas mekanik tersebut dengan data fiktif pesanan Kedai Kopi Siti.

Membuka: showModal() atau show() #

Fondasinya dari chapter sebelumnya: showModal() membuka dialog sebagai modal — halaman diblokir, ::backdrop tampil, tombol Esc aktif — sedangkan show() membuka dialog non-modal di alur halaman. Konfirmasi menuntut jawaban, jadi pilihannya showModal().

Menutup dengan close() dan returnValue #

Metode close() menutup dialog dan boleh membawa satu nilai: close(returnValue). Nilai ini disimpan pada properti dialog.returnValue — cara paling ringkas bagi dialog untuk “menjawab” halaman: konfirmasi hapus cukup menjawab "hapus" atau "batal".

Ada pula jalur otomatis: pada dialog modal, Esc memicu event cancel; bila tidak dicegah, browser menutup dialog seperti panggilan close().

Event close dan cancel #

Dua event menghubungkan dialog dengan halaman:

• close terpicu setiap kali dialog selesai ditutup — dari tombol, dari close(), maupun dari Esc. Di sinilah kita membaca dialog.returnValue dan bereaksi.
• cancel terpicu sesaat sebelum dialog modal ditutup oleh Esc; memanggil event.preventDefault() menolak penutupan, misalnya saat unggahan masih berlangsung.

Satu titik reaksi di event close menangkap semua jalur penutupan.

form method=“dialog”: Menutup Tanpa JavaScript #

Fitur yang sering terlewat: form dengan method="dialog" di dalam dialog mengubah perilaku submit — tombol tidak mengirim data ke server, browser hanya menutup dialog. Nilai value dari tombol submit yang ditekan menjadi returnValue dialog. Dua tombol — Batal dan Hapus — cukup dibedakan lewat value, tanpa JavaScript.

Contoh Konfirmasi Lengkap #

Pola lengkap untuk konfirmasi hapus pesanan:

<p id="status">Pesanan nomor 128 menunggu konfirmasi.</p>
<button type="button" id="buka">Hapus pesanan</button>

<dialog id="dialogHapus">
  <p>Hapus pesanan nomor 128?</p>
  <form method="dialog">
    <button value="batal" autofocus>Batal</button>
    <button value="hapus">Hapus</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("dialogHapus");
  const status = document.getElementById("status");

  document.getElementById("buka").addEventListener("click", () => {
    dialog.showModal();
  });

  dialog.addEventListener("close", () => {
    if (dialog.returnValue === "hapus") {
      status.textContent = "Pesanan nomor 128 dihapus.";
    } else {
      status.textContent = "Penghapusan dibatalkan (returnValue: " + dialog.returnValue + ").";
    }
  });
</script>

Mari kita telaah kode di atas:

1. Baris 3 (id="buka"): tombol pembuka di halaman utama; pemanggil showModal().
2. Baris 5 (<dialog>): kontainer konfirmasi dengan dua tombol keputusan.
3. Baris 7 (method="dialog"): submit tidak mengirim data ke server — browser hanya menutup dialog.
4. Baris 8–9 (value="batal" dan value="hapus"): nilai tombol yang ditekan menjadi returnValue.
5. Baris 8 (autofocus): fokus awal di tombol Batal — paling aman bila pengguna langsung menekan Enter.
6. Baris 16 (event close): satu titik reaksi untuk semua jalur penutupan.
7. Baris 17 (dialog.returnValue): keputusan dibaca dari nilai tombol.

Mencoba Konfirmasi dengan returnValue #

Demo berikut menjalankan pola yang sama. Tekan tombol, pilih Batal atau Hapus, lalu perhatikan baris status — tekan juga Esc saat dialog terbuka:

Tekan Esc saat dialog terbuka: returnValue berisi string kosong karena penutupan tidak berasal dari tombol — kode reaksi tetap berjalan di event close.

Ringkasan #

• Buka dengan showModal() (modal) atau show() (non-modal); tutup dengan close(returnValue) yang tersimpan di dialog.returnValue.
• Tulis reaksi sekali pada event close; event cancel bisa dicegah dengan preventDefault() untuk menolak penutupan lewat Esc.
• form method="dialog" menutup dialog saat submit dan menjadikan value tombol submit sebagai returnValue — tanpa JavaScript.

Chapter berikutnya berpindah ke elemen melayang yang tidak memblokir apa pun: Popover API.