htmlcssjavascriptkomponenMenengah10 mnt baca

Modal Popup

Jendela popup di tengah layar dengan overlay gelap, bisa ditutup berbagai cara.

Apa Itu Modal?

Modal adalah jendela yang muncul di atas halaman dan "mengunci" perhatian: pengguna harus berinteraksi dengannya (atau menutupnya) sebelum lanjut. Dipakai untuk konfirmasi hapus, detail produk, atau form singkat.

Langkah Membangun

HTML: <div class="overlay"> (latar gelap full-screen) berisi <div class="modal"> (kotak putih dengan judul, isi, tombol tutup).

CSS: Overlay memakai position: fixed; inset: 0 (menutupi seluruh viewport) dengan background hitam transparan. Modal di tengah via flex. Keduanya disembunyikan default (display: none), tampil dengan class buka plus animasi pop (scale 0.9 ke 1).

JS: Empat cara membuka/menutup:

  1. Klik tombol "Buka" -> tambah class buka.
  2. Klik tombol × -> hapus class.
  3. Klik overlay (area gelap di luar modal) -> tutup. Bedakan dengan e.target === overlay.
  4. Tekan Escape -> tutup.

Saat modal terbuka, kunci scroll body (document.body.style.overflow = "hidden") agar background tidak ikut scroll.

Kesalahan Umum

  • Klik di dalam modal ikut menutup karena listener dipasang di overlay tanpa cek target (pakai e.target === overlay).
  • Modal tidak di tengah di layar kecil (pakai flex centering + max-width + margin).
  • Fokus keyboard tertinggal di belakang modal (untuk latihan cukup, tapi aplikasi nyata harus trap focus).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Modal Gambar

Gabungkan dengan modul galeri: klik gambar di galeri membuka modal yang menampilkan gambar versi besar plus caption-nya. Modal bisa ditutup seperti biasa.