popup website modern Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/popup-website-modern/ Thu, 23 Apr 2026 08:20:02 +0000 id hourly 1 https://wordpress.org/?v=6.9.4 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png popup website modern Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/popup-website-modern/ 32 32 Panduan Membuat Modal Popup Interaktif HTML CSS JS https://farhanhidayat.com/panduan-membuat-modal-popup-interaktif-html-css-js/ https://farhanhidayat.com/panduan-membuat-modal-popup-interaktif-html-css-js/#respond Thu, 23 Apr 2026 08:20:02 +0000 https://farhanhidayat.com/?p=2464 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. Apa Itu Modal Popup […]

Artikel Panduan Membuat Modal Popup Interaktif HTML CSS JS pertama kali tampil pada Farhanhidayat.com.

]]> 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.

Apa Itu Modal Popup dan Kenapa Penting untuk Website?

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.

Persiapan Sebelum Membuat Modal Popup

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.

Cara Membuat Modal Popup HTML CSS JS (Step-by-Step)

1. Struktur HTML Modal Popup

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.

2. Styling Modal dengan CSS

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

.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.

Contoh Modal Popup Interaktif Siap Pakai

preview :

Full Code Modal Popup (Premium Version)

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

Kesalahan yang Sering Terjadi Saat Membuat Modal Popup

Walaupun terlihat sederhana, ada beberapa kesalahan yang sering terjadi.

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.

Tips Biar Modal Popup Lebih Menarik & Profesional

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.

Kapan Sebaiknya Menggunakan Modal Popup?

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.

FAQ

1. Apakah modal popup bisa dibuat tanpa JavaScript?

Bisa, tetapi interaksinya terbatas. JavaScript tetap dibutuhkan untuk kontrol yang lebih fleksibel.

2. Apakah modal popup mempengaruhi performa website?

Tidak terlalu, selama kamu tidak menggunakan script yang berat.

3. Bagaimana cara membuat modal popup responsive?

Gunakan CSS seperti flexbox dan media query agar tampil optimal di berbagai ukuran layar.

Artikel Panduan Membuat Modal Popup Interaktif HTML CSS JS pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/panduan-membuat-modal-popup-interaktif-html-css-js/feed/ 0