Dialog dan modals merupakan bagian integral dari sebagian besar aplikasi web. Meskipun membangunnya dengan tangan bukanlah tugas yang rumit, ini adalah tugas yang dengan cepat menjadi membosankan bagi pengembang web mana pun. Alternatif yang biasa untuk membangunnya dengan tangan adalah dengan menggunakan komponen yang dibuat oleh orang lain.

Ada beberapa masalah dengan pendekatan ini, meskipun. Ada begitu banyak pilihan, menjadi sulit untuk mengetahui komponen mana yang terbaik untuk digunakan, dan menyesuaikan tampilan komponen seperti itu terkadang sama membosankannya dengan membangun dialog dengan tangan. Untungnya, ada alternatif lain: elemen dialog HTML.

Apa itu Elemen Dialog?

Elemen dialog HTML adalah tag HTML bawaan (seperti div atau span), yang memungkinkan pengembang membuat dialog dan modal kustom. Elemen dialog telah ada di Chrome dan Opera sejak 2014, tetapi baru belakangan ini didukung oleh semua browser utama.

Mengapa Menggunakan Elemen Dialog?

Alasan utama untuk menggunakan elemen dialog adalah kenyamanan. Itu membuatnya mudah untuk membangun dialog yang dapat muncul sebaris atau muncul sebagai modals, dengan tidak lebih dari satu tag HTML dan beberapa baris JavaScript.

instagram viewer

Elemen dialog menghilangkan kebutuhan untuk membangun dan men-debug dialog khusus, atau mengimpor komponen orang lain. Hal ini juga sangat mudah untuk gaya dengan CSS.

Dukungan Browser untuk Elemen Dialog

Sayangnya, dukungan browser untuk elemen dialog bisa lebih baik. Ini didukung dalam versi terbaru dari semua browser utama pada Maret 2022, dengan beberapa peringatan.

Peramban Firefox apa pun yang lebih lama dari Firefox 98 hanya akan mendukungnya jika diaktifkan secara manual di pengaturan peramban, dan semua versi Safari sebelum Safari 15.4 tidak mendukungnya sama sekali. Detail dukungan browser lengkap tersedia di caniuse.

Untungnya, ini tidak berarti elemen dialog tidak dapat digunakan. Tim Google Chrome mengelola polyfill yang dapat Anda temukan di Github untuk elemen dialog yang menyediakan dukungan untuknya bahkan di browser yang tidak didukung secara asli.

Dalam bentuknya saat ini, elemen dialog dapat memiliki masalah aksesibilitas, jadi mungkin lebih cocok menggunakan komponen dialog khusus seperti a11y-dialog dalam aplikasi produksi.

Cara Menggunakan Elemen Dialog

Untuk mendemonstrasikan cara menggunakan elemen dialog, Anda akan menggunakannya untuk membangun fitur situs web umum: modal konfirmasi untuk tombol hapus.

Semua yang diperlukan untuk mengikuti adalah satu file HTML.

1. Siapkan File HTML

Mulailah dengan membuat file tersebut dan beri nama index.html.

Selanjutnya, buat struktur file HTML dan berikan beberapa informasi meta dasar tentang halaman, sehingga ditampilkan dengan benar di semua perangkat.

Ketik kode berikut ke dalam index.html:

<!DOCTYPE html>
<html lang="id">
<kepala>
<rangkaian meta="UTF-8">
<meta http-equiv="Kompatibel dengan X-UA" konten="IE = tepi">
<nama meta ="area pandang" konten="lebar=lebar perangkat, skala awal=1.0">
<judul>Demo dialog</title>
</head>
<gaya></style>


<tubuh></body>
<naskah></script>
</html>

Itu semua pengaturan yang diperlukan untuk proyek ini.

2. Menulis Markup

Selanjutnya, tulis markup untuk tombol hapus, serta elemen dialog.

Ketik kode berikut di tag body index.html:

<kelas div="tombol-wadah">
<tombol>
Menghapus barang
</button>
</div>
<dialog>
<div>
 Apakah Anda yakin ingin? menghapusini barang?
</div>
<div>
<kelas tombol ="menutup">
 Ya
</button>
<kelas tombol ="menutup">
 Tidak
</button>
</div>
</dialog>

HTML di atas akan membuat:

  • Tombol hapus.
  • Elemen dialog.
  • Dua tombol di dalam dialog.

Jika index.html terbuka di browser Anda, satu-satunya elemen yang terlihat di layar adalah tombol hapus. Ini tidak berarti ada yang salah, elemen dialog hanya membutuhkan sedikit JavaScript agar terlihat.

3. Menambahkan JavaScript

Sekarang, tulis kode yang akan membuka dialog ketika pengguna mengklik tombol hapus, serta kode untuk memungkinkan dialog ditutup.

Ketik yang berikut di tag skrip index.html:

konstan modal = dokumen.querySelector("dialog")
document.queryPemilih(".tombol-wadah tombol").addEventListener("klik", () => {
modal.showModal();
});
konstan closeBtns = dokumen.getElementsByClassName("tutup");
untuk (btn dari closeBtns) {
 btn.addEventListener("klik", () => {
modal.menutup();
 })
}

Kode ini menggunakan metode querySelector untuk mendapatkan referensi ke tombol dan dialog. Itu kemudian melampirkan pendengar acara klik ke setiap tombol.

Anda mungkin akrab dengan pendengar acara dalam JavaScript, yang dapat Anda gunakan sendiri. Event listener yang dilampirkan ke tombol hapus memanggil metode showModal() untuk menampilkan dialog saat tombol diklik.

Setiap tombol di dalam modal memiliki event listener yang terpasang padanya yang menggunakan metode close() untuk menyembunyikan dialog saat diklik.

Bahkan jika tidak ada JavaScript yang memanggil metode close() dalam kode, pengguna juga dapat menutup modal dengan menekan tombol escape pada keyboard mereka.

Sekarang JavaScript ini ada, jika pengguna mengklik tombol hapus, modal akan terbuka, dan mengklik tombol ya atau tidak akan menutup modal.

Seperti inilah tampilan modal yang dibuka:

Satu hal yang perlu diperhatikan adalah bahwa elemen dialog sudah dilengkapi dengan beberapa gaya, meskipun tidak ada CSS di index.html. Modal sudah terpusat, memiliki batas, lebar terbatas pada konten, dan memiliki beberapa bantalan default.

Pengguna tidak dapat berinteraksi (klik, pilih) dengan apa pun di latar belakang saat modal terbuka.

Elemen dialog juga dapat menampilkan dirinya sebagai bagian dari alur halaman, bukan sebagai modal. Untuk mencobanya, ubah pendengar acara pertama di JavaScript seperti:

document.queryPemilih(".tombol-wadah tombol").addEventListener("klik", () => { modal.tampilkan(); });

Satu-satunya hal yang berubah dalam kode ini adalah bahwa kode tersebut memanggil metode show(), bukan metode showModal(). Sekarang, ketika pengguna mengklik tombol hapus item, modal akan terbuka sebaris seperti ini:

4. Tambahkan Gaya

Selanjutnya, sesuaikan tampilan dialog dan latar belakangnya dengan menulis CSS.

CSS akan mengurangi batas dialog, membatasi lebar maksimumnya, lalu menggelapkan latar belakang, serta menambahkan sedikit gaya pada tombol.

Menata dialog itu sendiri sangatlah mudah, tetapi kelas semu latar belakang diperlukan untuk menambahkan gaya yang menargetkan latar belakang dialog.

Tempel kode berikut di tag gaya index.html:

dialog:: latar belakang {
 latar belakang: hitam;
kegelapan: 0.5;
}
tombol {
 batas-radius: 2px;
 latar belakang-warna: putih;
 perbatasan: 1px hitam pekat;
 margin: 5 piksel;
 box-shadow: 1px 1px 2px abu-abu;
}
dialog {
 lebar maksimum: 90vw;
 perbatasan: 1px hitam pekat;
}

Ketika dialog terbuka, seharusnya sekarang terlihat seperti ini:

Dan Anda telah membangun dialog yang berfungsi penuh.

Elemen Dialog Adalah Cara Hebat untuk Membangun Modal

Menggunakan elemen dialog HTML yang baru-baru ini mendapatkan dukungan di semua browser utama, pengembang web sekarang dapat membangun berfungsi penuh, modals dan dialog yang mudah disesuaikan dengan satu tag HTML dan beberapa baris JavaScript dan tanpa perlu bergantung pada pihak ketiga larutan.

Elemen dialog memiliki polyfill yang dikelola oleh tim Google Chrome, yang memungkinkan pengembang menggunakan dialog dalam versi browser yang tidak mendukungnya.