Pembahasan dan Cara Membuat Modal Dialog dengan Elemen HTML dialog

Dialog atau biasa disebut dengan Modal Dialog adalah Pop-Up yang biasa terlihat pada halaman Web.
Yasya El Hakim

Pembahasan dan Cara Membuat Modal Dialog dengan Elemen HTML dialog

Dialog atau biasa disebut dengan Modal Dialog adalah Pop-Up yang biasa terlihat pada halaman Web untuk menyembunyikan konten dan dapat di tampilkan ketika terdapat pengguna mengeklik suatu tombol untuk membukanya. Tujuan utama dari Dialog adalah ketika muncul atau terlihat, pengguna dapat berinteraksi dengan konten yang ada di dalamnya.

Berikut adalah contoh tampilan dari Dialog atau Modal Dialog:

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.

Table of Contents

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.

about:config Firefox

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>

Berikut hasil dari kode diatas:

Contoh Dialog

Lihat Demo

Menampilkan Backdrop Cover pada Dialog Modal

Untuk dapat menampilkan Backdrop (Background transparan dibelakan Modal), kita dapat menggunakan metode dialog.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>

Berikut hasil dari kode diatas:

Modal Dialog Backdrop Cover

Lihat Demo

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.

Akhir Kata...

Semoga kalian dapat memahaminya dengan mudah. Jika artikel ini bermanfaat, silahkan bagikan ini kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

Updated: Thursday, 04 November 2021

Share:
Label:
Yasya El Hakim
404 Not Found!
Comments