Home Coding Panduan Membuat Modal Popup Interaktif HTML CSS JS

Panduan Membuat Modal Popup Interaktif HTML CSS JS

Farhan Hidayat 23 April 2026 6 min read

Banyak developer menggunakan modal popup untuk meningkatkan interaksi di website, mulai dari notifikasi hingga form login. Selain itu, elemen ini juga membantu menarik perhatian user tanpa harus pindah halaman. Di artikel ini, kamu akan belajar cara membuat modal popup HTML CSS JS yang interaktif, responsif, dan tetap ringan tanpa library tambahan.

Secara sederhana, modal popup adalah elemen UI yang muncul di atas halaman utama. Biasanya, modal ini digunakan untuk menampilkan informasi penting seperti konfirmasi, form, atau promosi.

Di sisi lain, modal popup juga punya peran penting dalam meningkatkan user experience. Misalnya, kamu bisa menampilkan form login tanpa reload halaman. Selain itu, popup juga sering dipakai untuk CTA (Call to Action) agar lebih terlihat.

Namun, penggunaan yang berlebihan justru bisa mengganggu. Karena itu, penting untuk menggunakannya secara tepat.

Also Read: 5 Toggle Switch CSS Mirip iOS + Cara Membuatnya

Sebelum mulai coding, ada beberapa hal yang perlu kamu siapkan. Pertama, gunakan text editor seperti VS Code. Kedua, pastikan kamu sudah memahami dasar HTML, CSS, dan JavaScript.

Selain itu, kamu juga perlu memahami struktur dasar modal popup, yaitu:

Trigger button (tombol untuk membuka modal)
Overlay (background gelap di belakang modal)
Content box (isi dari popup)

Dengan memahami konsep ini, proses pembuatan akan jauh lebih mudah.

Also Read: Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS)

Langkah pertama adalah membuat struktur HTML. Kamu perlu menyiapkan tombol dan container modal.

<button id="openModal">Buka Popup</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="closeModal">×</span>
    <h2>Modal Popup</h2>
    <p>Ini adalah contoh modal popup sederhana.</p>
  </div>
</div>

Struktur ini cukup sederhana, tetapi sudah mencakup semua elemen penting.

Selanjutnya, kita atur tampilannya menggunakan CSS. Tujuannya agar modal terlihat menarik dan berada di tengah layar.

Also Read: Cara Membuat 10 Animasi Scroll CSS & JS yang Smooth

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

.modal-content {
  background: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  border-radius: 8px;
}

Selain itu, kamu juga bisa menambahkan animasi sederhana seperti fade atau scale agar terlihat lebih modern.

3. Menambahkan Interaksi dengan JavaScript

Agar modal bisa dibuka dan ditutup, kamu perlu menambahkan JavaScript.

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

openBtn.onclick = () => modal.style.display = "block";
closeBtn.onclick = () => modal.style.display = "none";

window.onclick = (e) => {
  if (e.target == modal) {
    modal.style.display = "none";
  }
};

Dengan script ini, modal akan terbuka saat tombol diklik dan tertutup saat user klik tombol close atau area luar modal.

Also Read: Cara Mudah Membuat Dropdown Menu dengan HTML CSS

preview :

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal Popup Premium</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<button class="btn" id="openModal">Open Modal</button>

<div class="modal" id="modal" aria-hidden="true">
  <div class="modal__overlay" data-close></div>

  <div 
    class="modal__container" 
    role="dialog" 
    aria-modal="true" 
    aria-labelledby="modal-title"
  >
    <button class="modal__close" data-close>×</button>

    <h2 id="modal-title">Welcome 👋</h2>
    <p>Ini adalah modal popup interaktif versi profesional.</p>

    <div class="modal__actions">
      <button class="btn btn--secondary" data-close>Cancel</button>
      <button class="btn">Continue</button>
    </div>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS (Modern + Smooth + Clean)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f172a;
}

/* Button */
.btn {
  padding: 12px 20px;
  border: none;
  background: #3b82f6;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background: #2563eb;
}

.btn--secondary {
  background: #e5e7eb;
  color: #111;
}

/* Modal Base */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Active State */
.modal.is-open {
  visibility: visible;
  opacity: 1;
}

/* Overlay */
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

/* Container */
.modal__container {
  position: relative;
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  z-index: 10;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

/* Animation */
.modal.is-open .modal__container {
  transform: scale(1);
}

/* Close */
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

/* Actions */
.modal__actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

JavaScript (Clean & Scalable)

const modal = document.getElementById("modal");
const openBtn = document.getElementById("openModal");
const closeElements = document.querySelectorAll("[data-close]");

function openModal() {
  modal.classList.add("is-open");
  modal.setAttribute("aria-hidden", "false");
  document.body.style.overflow = "hidden";
}

function closeModal() {
  modal.classList.remove("is-open");
  modal.setAttribute("aria-hidden", "true");
  document.body.style.overflow = "";
}

// Open
openBtn.addEventListener("click", openModal);

// Close (button & overlay)
closeElements.forEach(el => {
  el.addEventListener("click", closeModal);
});

// Close with ESC
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeModal();
  }
});

Jika semua langkah di atas digabungkan, kamu sudah mendapatkan modal popup yang bisa digunakan di berbagai kebutuhan. Misalnya, untuk popup login, notifikasi, atau promosi.

Selain itu, kamu juga bisa mengembangkan fitur seperti:

Form input di dalam modal
Animasi transisi
Integrasi dengan backend

Walaupun terlihat sederhana, ada beberapa kesalahan yang sering terjadi.

Also Read: 7 Animasi Teks CSS Otomatis yang Bikin Website Lebih Hidup

Pertama, modal tidak bisa ditutup karena event JavaScript salah. Kedua, posisi modal tidak center karena CSS kurang tepat. Selain itu, banyak juga yang lupa membuat desain responsive.

Karena itu, pastikan setiap bagian sudah diuji dengan baik.

Agar hasilnya lebih maksimal, kamu bisa menerapkan beberapa tips berikut:

Gunakan animasi yang halus agar tidak mengganggu
Tambahkan tombol close yang jelas
Gunakan warna kontras untuk CTA
Pastikan responsive di semua device

Dengan begitu, tampilan website kamu akan terlihat lebih profesional.

Modal popup sebaiknya digunakan saat kamu ingin menarik perhatian user, seperti untuk promo atau form penting. Namun, hindari penggunaan berlebihan karena bisa mengganggu pengalaman pengguna.

Selain itu, gunakan popup di momen yang tepat, misalnya setelah user melakukan aksi tertentu.

Kesimpulan

Membuat modal popup HTML CSS JS ternyata tidak sesulit yang dibayangkan. Dengan struktur yang sederhana dan sedikit sentuhan JavaScript, kamu sudah bisa membuat popup interaktif yang menarik.

Selain itu, jika kamu menambahkan animasi dan optimasi responsive, hasilnya bisa terlihat jauh lebih profesional. Jadi, sekarang tinggal kamu praktikkan dan kembangkan sesuai kebutuhan website kamu.