Hai semua… kali ini saya akan memberikan cara membuat modal dialog box menggunakan tag HTML <dialog> dan javascript tanpa jquery.

Pada intinya tag dialog itu akan membuat kotak khusus sebagai subwindow atau bagian lain dari window kita. Biasanya dipakai untuk membuat pemberitahuan (alert) atau popup windows tanpa membuka window browser baru.

Contohnya kita ingin menampilkan dialog box berisi form yang bisa diisi dan diambil datanya.

<dialog id="dialogBox">
        <form method="dialog">
            <p><label>Warna favorit:
                    <select>
                        <option></option>
                        <option>Merah</option>
                        <option>Kuning</option>
                        <option>Hijau</option>
                    </select>
                </label></p>
            Nama: <input type="text" name="nama" id="nama" size="5" />
            <menu>
                <button value="cancel">Cancel</button>
                <button id="confirmBtn" value="default">Confirm</button>
            </menu>
        </form>
    </dialog>

    <menu>
        <button id="openForm">Open form</button>
    </menu>

    <output aria-live="polite"></output>

Ada 2 field dalam form ini yaitu combo box dan text box. Kemudian diberikan 2 tombol: Cancel dan Confirm di dalam form tersebut.

Lalu kita sediakan tombol untuk membuka dialog form tersebut.

Tag output disediakan untuk menampilkan form dialog box yang dibuka dengan tombol ‘Openform’. Attribut aria-live=”polite” pada tag output diberikan untuk membuat screen reader menunggu sampai user melakukan perubahan pada tag output.

Selanjutnya kita buat coding javascriptnya berikut ini.

        const updateButton = document.getElementById('openForm');
        const dialogBox = document.getElementById('dialogBox');
        const outputBox = document.querySelector('output');
        const selectEl = document.querySelector('select');
        const nama = document.getElementById('nama');
        const confirmBtn = document.getElementById('confirmBtn');

        // "Open form" button opens the <dialog> modally
        updateButton.addEventListener('click', function onOpen() {
            if (typeof dialogBox.showModal === "function") {
                dialogBox.showModal();
            } else {
                alert("The <dialog> API is not supported by this browser");
            }
        });
        // input sets the value of the submit button
        selectEl.addEventListener('change', function onSelect(e) {
            confirmBtn.value = selectEl.value;
        });
        // "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
        dialogBox.addEventListener('close', function onClose() {
            outputBox.value = "Warna favorit " + nama.value + " adalah " + dialogBox.returnValue;
        });

Itulah cara untuk membuat modal dialog box dengan html tag <dialog> dan javascript sederhana. Selamat mencoba, semoga berhasil.