Berikut adalah contoh tampilan dari Dialog atau Modal Dialog:
Background yang berwarna gelap transparan biasanya disebut dengan Backdrop Cover.
Pada artikel ini, kita akan membahas segala hal tentang Modal Dialog yang dibuat dengan menggunakan elemen HTML yaitu
<dialog> serta beberapa contoh penggunaanya.Daftar Isi
Elemen dialog pada HTML
Elemen HTML <dialog> dapat kita gunakan untuk membuat Dialog atau Modal Dialog yang memiliki atribut spesial. Berikut adalah atribut untuk elemen <dialog>:
open- Berguna untuk menandakan bahwa Dialog tersebut sedang aktif dan kita sebagai pengguna dapat berinteraksi dengan konten yang ada di dalamnya. Jika atribut ini tidak ada, maka Dialog tersebut tidak akan terlihat/tersembunyi. Berikut adalah contoh penulisannya:<dialog> Pengguna tidak dapat melihat konten ini. </dialog> <dialog open> Pengguna dapat melihat konten ini. </dialog>
Sampai saat ini, Elemen <dialog> sudah didukung oleh Browser Modern seperti Google Chrome versi 37 keatas, Microsoft Edge versi 79 keatas, Mozilla Firefox (Didukung jika kita mengaktifkan flag dom.dialog_element.enabled pada about:config). Sedangkan pada Browser Safari untuk saat ini belum didukung.
Informasi lebih lengkap dan terbaru dari dukungan elemen tersebut dapat kalian lihat disini.
API Elemen dialog
Terdapat API (Application Programming Interface) yang tersedia untuk menampilkan dan menyembunyikan dialog:
dialog.show(); // Untuk menampilkan Dialog
dialog.close(); // Untuk menyembunyikan Dialog
Kotak Dialog akan muncul atau terlihat kepada pengguna dengan Style user-agent dasar dan tentunya kita dapat mengkustomisasinya sendiri.
Contoh Kode Modal Dialog dengan Elemen dialog
Berikut adalah contoh kode untuk membuat Modal Dialog dasar dengan tombol untuk menampilkan dan menyembunyikannya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal Dialog | EL Creative Academy</title>
</head>
<body>
<button onclick="tampilkanDialog()">Tampilkan Dialog</button>
<dialog id="kotak-dialog">
<p>Ini adalah Kotak Dialog</p>
<button onclick="sembunyikanDialog()">Sembunyikan Dialog</button>
</dialog>
<script>
var dialog = document.querySelector('dialog')
dialogPolyfill.registerDialog(dialog)
function tampilkanDialog() {
document.getElementById('kotak-dialog').show()
}
function sembunyikanDialog() {
document.getElementById('kotak-dialog').close()
}
</script>
</body>
</html>
Menampilkan Backdrop Cover pada Dialog Modal
Untuk dapat menampilkan Backdrop (Background transparan dibelakan Modal), kita dapat menggunakan metodedialog.showModal(). Secara default, Backdrop Cover memiliki transparansi (opacity) rendah. Disini kita juga dapat mengatur tampilan dari Backdrop dengan menambahkan CSS kedalam pseudo-element ::backdrop. Berikut contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal Dialog | EL Creative Academy</title>
<style>
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button onclick="tampilkanDialog()">Tampilkan Dialog</button>
<dialog id="kotak-dialog">
<p>Ini adalah Kotak Dialog</p>
<button onclick="sembunyikanDialog()">Sembunyikan Dialog</button>
</dialog>
<script>
var dialog = document.querySelector('dialog')
dialogPolyfill.registerDialog(dialog)
function tampilkanDialog() {
document.getElementById('kotak-dialog').showModal()
}
function sembunyikanDialog() {
document.getElementById('kotak-dialog').close()
}
</script>
</body>
</html>
Kelebihan dan Kekurangan Elemen dialog
Selain menutup/menyembunyikan elemen HTML<dialog> dengan menggunakan tombol yang telah disediakan, kita juga dapat menggunakan tombol ESC (Escape) pada Keyboard. Itulah salah satu kelebihan dari elemen dialog.Kekurangan dari elemen dialog adalah kita tidak dapat menutup/menyembuyikan Pop-Up modal melalui/dengan mengeklik pada Backdrop. Tetapi, mungkin saja kedepannya fitur tersebut akan segera di implementasikan.
Melihat dari kelebihan dan kekurangannya, salah satu elemen HTML ini dapat digunakan dengan sempurna dengan Polyfill. Selama elemen ini dapat digunakan, kita tidak memerlukan library eksternal untuk mengimplementasikan Dialog Modal/Pop-Up.
Posting Komentar