Popup Modal dan Notifikasi dengan JavaScript

Popup modal adalah elemen yang muncul di atas halaman utama untuk menampilkan pesan, formulir, atau konfirmasi penting tanpa mengubah halaman. Biasanya digunakan untuk menampilkan peringatan, notifikasi, atau form input seperti login dan konfirmasi penghapusan data. Jadi, dalam tutorial kali ini, kita akan belajar membuat Popup Modal dan Notifikasi dengan JavaScript.

Contoh popup modal dapat kamu lihat di banyak situs saat menampilkan pesan “Apakah kamu yakin ingin menghapus data ini?” — itu adalah salah satu bentuk modal dialog.

Struktur Dasar HTML Popup Modal

Berikut contoh sederhana struktur modal:

<button id="openModal">Tampilkan Modal</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <h2>Selamat Datang!</h2>
    <p>Ini adalah contoh popup modal dengan JavaScript.</p>
  </div>
</div>

Tambahkan sedikit CSS agar tampilannya menarik:

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  border-radius: 8px;
  text-align: center;
}

.close {
  float: right;
  font-size: 20px;
  cursor: pointer;
}

Menampilkan dan Menutup Modal dengan JavaScript

Gunakan event listener untuk membuka dan menutup popup:

const modal = document.getElementById("modal");
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeModal");

openBtn.addEventListener("click", () => {
  modal.style.display = "block";
});

closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

// Tutup modal jika klik area luar
window.addEventListener("click", (e) => {
  if (e.target === modal) {
    modal.style.display = "none";
  }
});

Penjelasan:

• display: block menampilkan modal.

• display: none menyembunyikan modal.

• Event window.onclick menutup modal saat area luar diklik.

Membuat Notifikasi Sederhana

Selain modal, kamu juga bisa membuat notifikasi otomatis dengan JavaScript. Contoh: notifikasi yang muncul di pojok layar lalu hilang sendiri.

<button id="showNotif">Tampilkan Notifikasi</button>
<div id="notif" class="notif"></div>

Tambahkan CSS untuk gaya notifikasi:

.notif {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #4caf50;
  color: white;
  padding: 15px;
  border-radius: 5px;
  display: none;
}

JavaScript-nya:

const notif = document.getElementById("notif");
const btn = document.getElementById("showNotif");

btn.addEventListener("click", () => {
  notif.textContent = "Data berhasil disimpan!";
  notif.style.display = "block";

  setTimeout(() => {
    notif.style.display = "none";
  }, 3000); // Hilang otomatis setelah 3 detik
});

Studi Kasus Mini: Konfirmasi Hapus Data

<button id="deleteBtn">Hapus Data</button>

<div id="confirmModal" class="modal">
  <div class="modal-content">
    <p>Apakah kamu yakin ingin menghapus data ini?</p>
    <button id="yesBtn">Ya</button>
    <button id="noBtn">Tidak</button>
  </div>
</div>

const deleteBtn = document.getElementById("deleteBtn");
const confirmModal = document.getElementById("confirmModal");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");

deleteBtn.onclick = () => confirmModal.style.display = "block";
noBtn.onclick = () => confirmModal.style.display = "none";
yesBtn.onclick = () => {
  confirmModal.style.display = "none";
  alert("Data berhasil dihapus!");
};

Kesimpulan

Popup modal dan notifikasi adalah cara efektif untuk meningkatkan interaktivitas dan user experience di website. Dengan JavaScript, kamu bisa membuat modal konfirmasi, alert custom, hingga notifikasi otomatis tanpa library tambahan.