Tutup Otomatis dengan Cara Detect Klik di Luar Modal Javascript

Ditulis oleh JavaScript

Cara detect klik di luar modal JavaScript paling aman adalah memeriksa apakah klik terjadi di luar kotak konten dengan !modalContent.contains(event.target), lalu panggil fungsi tutup. Jangan samakan klik tombol close dengan klik backdrop, karena keduanya butuh kondisi berbeda.

Cara Kerja Deteksi Klik di Luar Modal

Browser mengirim objek event setiap ada klik. Properti event.target menyimpan elemen yang benar-benar diklik.

Logikanya sederhana. Klik di dalam konten modal harus diabaikan. Klik di area gelap overlay harus menutup modal.

  • Overlay menutupi seluruh layar dan menjadi area tutup.
  • Konten modal berada di tengah dan harus kebal dari klik tutup.
  • Listener di document menangkap semua klik yang terjadi.
  • Method contains() memastikan target klik masih bagian dari modal.

Kode Detect Klik di Luar Modal Javascript

Ikuti urutan ini agar listener tidak membaca elemen yang belum ada:

1. Siapkan HTML berisi div overlay dan div konten modal.
2. Ambil kedua elemen dengan getElementById.
3. Pasang document.addEventListener("click").
4. Cek dengan contains(), jika di luar, sembunyikan modal.

const overlay = document.getElementById("modal-overlay");
const modalBox = document.getElementById("modal-box");

document.addEventListener("click", function(event) {
  if (!overlay.classList.contains("hidden")) {
    if (!modalBox.contains(event.target)) {
      overlay.classList.add("hidden");
    }
  }
});

Baris modalBox.contains(event.target) menghasilkan true untuk klik tombol, teks, dan input di dalam modal. Tanda seru membalik hasilnya, sehingga hanya klik luar yang menutup. Pengecekan class hidden mencegah listener menutup modal yang memang sedang tidak tampil.

BACA JUGA:

Varian Backdrop dan Masalah Umum

  • Pola overlay: listener dipasang langsung ke backdrop, cocok untuk satu modal statis.
  • Pola document click: listener global plus contains(), cocok untuk modal dinamis.
  • Pola stopPropagation: klik konten dihentikan dengan stopPropagation(), praktis tetapi rapuh bila ada banyak listener bersarang.
Metode Cocok Untuk Catatan
Klik overlay Modal sederhana Gagal bila konten menutupi overlay
contains() Modal dinamis Paling stabil dan mudah dibaca
stopPropagation Komponen kecil Bisa merusak listener lain

Selalu cek null sebelum memakai contains(). Untuk modal yang dibuat lewat JavaScript, pasang ulang referensi elemen setiap modal dirender ulang.

FAQ

Kenapa modal langsung menutup saat dibuka?

Tombol pembuka ikut tertangkap listener document, jadi bungkus logika buka dan tutup dengan kondisi status modal.

Apakah pakai stopPropagation atau contains?

Gunakan contains() karena tidak mengganggu event lain di halaman.

Bagaimana jika ada banyak modal?

Loop semua elemen .modal-box dan tutup hanya modal yang target kliknya berada di luarnya.

Artikel Terkait