Blog

Web Development

Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula

Irhan Hisyam Dwi Nugroho

•

28 March 2025

•

799

Cara membuat pop up di HTML sebenarnya sangat mudah, dan MinDi di sini siap membimbing kamu. Pop up bisa menambah interaktivitas dan keseruan pada website yang kamu buat.

Dalam artikel ini, MinDi akan menjelaskan langkah-langkah praktis untuk membuat pop up dengan HTML dan JavaScript. Tidak perlu khawatir, meskipun kamu pemula, MinDi pastikan kamu bisa mengikutinya dengan mudah!

Yuk, simak panduan lengkapnya dan mulai buat pop up di website kamu!

Apa Itu Pop Up di HTML?

Pop up di HTML adalah elemen interaktif yang muncul di atas halaman web untuk menarik perhatian pengguna.

Biasanya, pop up digunakan untuk menampilkan informasi tambahan, pesan selamat datang, atau bahkan iklan.

Pop up ini bisa dibuat menggunakan kombinasi HTML, CSS, dan JavaScript untuk mengontrol tampilannya, seperti kapan dan di mana pop up muncul.

Dengan memanfaatkan pop up, kamu bisa membuat pengalaman pengguna lebih menarik dan interaktif di website yang kamu buat.

Langkah-langkah Membuat Pop Up di HTML

Sumber: Canva

Cara membuat pop up di HTML, kamu hanya perlu menggabungkan HTML, CSS, dan JavaScript. Berikut adalah langkah-langkah sederhana untuk membuat pop up yang interaktif.

1. Buat Struktur HTML

Langkah pertama adalah membuat struktur dasar HTML. Kamu perlu membuat tombol yang akan memicu munculnya pop up dan elemen div yang berfungsi sebagai pop up itu sendiri. Berikut adalah contoh kode HTML untuk tombol dan pop up:

<button id="myBtn">Klik untuk Membuka Pop Up</button>

<p>Ini adalah pop up pertama kamu!</p>

</div>

2. Sesuaikan Tampilan Pop Up dengan CSS

Setelah membuat struktur HTML, kamu perlu menambahkan styling menggunakan CSS. CSS ini akan menyembunyikan pop up saat pertama kali dimuat dan menampilkannya saat tombol diklik.

Kamu juga akan mendesain pop up agar tampil menarik dengan latar belakang semi transparan dan posisi yang sesuai.

modal {

display: none;

position: fixed;

z-index: 1;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.4);

}

.modal-content {

background-color: #fefefe;

margin: 15% auto;

padding: 20px;

border: 1px solid #888;

width: 80%;

}

.close {

color: #aaa;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: black;

text-decoration: none;

cursor: pointer;

}

3. Tambahkan Interaktivitas dengan JavaScript

Terakhir, kamu perlu menambahkan JavaScript untuk menangani interaksi. JavaScript akan membuat pop up muncul saat tombol diklik dan menutupnya saat ikon “X” diklik. Kode ini akan membuat pop up berfungsi dengan baik di halaman web kamu.

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

// Menampilkan pop up ketika tombol diklik

btn.onclick = function() {

modal.style.display = "block";

}

// Menutup pop up ketika tombol (x) diklik

span.onclick = function() {

modal.style.display = "none";

}

// Menutup pop up ketika area luar pop up diklik

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

Dengan mengikuti langkah-langkah ini, kamu sudah bisa membuat pop up interaktif yang mudah diimplementasikan di halaman HTML kamu!

Tips Menggunakan Pop Up dengan Efektif

Sumber: Canva

Setelah mempelajari cara membuat pop up di HTML, ada beberapa tips agar pop up yang kamu buat efektif dan tidak mengganggu pengalaman pengguna. Berikut adalah lima tips untuk menggunakan pop up dengan baik:

1. Gunakan Pop Up Secara Bijak

Pop up bisa sangat mengganggu jika muncul terlalu sering atau tidak relevan dengan konten.

Pastikan kamu hanya menggunakan pop up untuk tujuan yang jelas, seperti memberikan informasi penting atau menawarkan penawaran khusus.

Jangan sampai pop up menjadi gangguan yang membuat pengunjung meninggalkan halaman web kamu.

2. Pastikan Pop Up Mudah Ditutup

Pengguna harus dapat menutup pop up dengan mudah. Pastikan ada tombol penutupan yang jelas, seperti ikon “X” di sudut pop up.

Jika kamu menggunakan cara membuat pop up di HTML, pastikan fungsionalitas penutupan bekerja dengan baik agar pengunjung tidak merasa terjebak di dalamnya.

3. Tampilkan Pop Up di Waktu yang Tepat

Jangan langsung menampilkan pop up ketika pengunjung pertama kali membuka halaman.

Beri mereka waktu untuk melihat konten terlebih dahulu, dan tampilkan pop up setelah beberapa detik atau setelah mereka menggulirkan halaman.

Ini akan memberikan pengalaman pengguna yang lebih baik tanpa mengganggu interaksi awal.

4. Jangan Gunakan Pop Up Berlebihan

Terlalu banyak pop up dapat merusak pengalaman pengguna. Gunakan pop up hanya untuk informasi yang benar-benar penting dan tidak bisa disampaikan dengan cara lain.

Pastikan bahwa hanya satu pop up yang muncul dalam satu waktu, dan jangan membuat pengunjung merasa seperti sedang diserbu dengan iklan.

5. Pastikan Pop Up Responsif di Semua Perangkat

Pop up yang tidak responsif akan sulit digunakan di perangkat mobile. Pastikan pop up yang kamu buat dengan cara membuat pop up di HTML bisa menyesuaikan diri dengan berbagai ukuran layar, baik di desktop maupun perangkat mobile.

Gunakan CSS media queries untuk memastikan pop up tetap tampil dengan baik di semua perangkat.

Yuk, Ikuti Bootcamp Web Development di dibimbing.id!

Setelah mempelajari cara membuat pop up di HTML, sekarang saatnya untuk memperdalam keterampilan web development kamu!

Di Bootcamp Web Development di dibimbing.id, kamu akan belajar lebih banyak tentang HTML, CSS, JavaScript, dan berbagai teknik pengembangan web lainnya yang akan membantumu menjadi seorang Web Developer profesional.

Belajar langsung dari mentor berpengalaman dengan kurikulum aplikatif yang mempersiapkan kamu untuk menciptakan website profesional dengan keterampilan coding yang tepat.

Dengan lebih dari 840 hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia IT semakin terbuka lebar!

Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu menuju karier sebagai Web Developer profesional. #BimbingSampeJadi

Referensi

How To Create Popups [Buka]