HTML5Tingkat: Menengah6 min
Modal Semantik (<dialog>) & Popover API Native
Tinggalkan pustaka JavaScript pihak ketiga untuk membuat modal popup: pelajari elemen bawaan HTML5 <dialog> dengan backdrop otomatis dan Popover API modern.
Elemen Semantik <dialog> dan Backdrop
Pratinjau TerbukaElemen <dialog> menyediakan modal bawaan yang secara otomatis menangani fokus keyboard, penekanan tombol Escape untuk menutup, dan pseudo-elemen ::backdrop untuk meredupkan latar belakang halaman.
Contoh Kode Sintaks
<!-- HTML Modal Bawaan -->
<button id="bukaModalBtn">Buka Modal Profil</button>
<dialog id="profilDialog">
<form method="dialog">
<h3>Konfirmasi Pembaruan</h3>
<p>Apakah Anda yakin ingin menyimpan perubahan konfigurasi?</p>
<div class="actions">
<button value="cancel">Batal</button>
<button value="confirm" autofocus>Konfirmasi</button>
</div>
</form>
</dialog>
<script>
const modal = document.getElementById('profilDialog');
document.getElementById('bukaModalBtn').addEventListener('click', () => {
modal.showModal(); // Membuka sebagai modal dengan trap fokus
});
</script>Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi