CARA MEMBUAT POPUP DENGAN JAVASCRIPT

Dalam dunia pengembangan web, terkadang kamu mungkin perlu membuat popup atau jendela pop-up. Fungsi popup sangat beragam, bisa untuk menampilkan informasi tambahan, konfirmasi, atau formulir input user. Berikut adalah tutorial sederhana tentang cara membuat popup dengan JavaScript.

Langkah 1: Membuat Struktur HTML

Yang pertama kamu butuhkan adalah struktur HTML untuk popup. Buatlah sebuah div dengan id pop-up. Di dalam div tersebut, kamu bisa menambahkan elemen-elemen lainnya seperti judul, paragraf, ataupun tombol.

<div id="popup" class="popup-hidden">
     <h2>Ini adalah Popup</h2>
     <p>Popup ini dibuat dengan menggunakan JavaScript.</p>
     <button id="tutup">Tutup</button>
</div>

Langkah 2: Penambahan CSS

Setelah struktur HTML, kita perlu menambahkan gaya CSS. CSS ini akan menentukan bagaimana tampilan popup di layar. Kamu bisa menambahkan CSS ini di dalam file CSS kamu.

.popup-hidden {
     display: none;
}
.popup-tampil {
     display: block;
     position: fixed;
     width: 300px;
     padding: 20px;
     background-color: white;
}

Langkah 3: Membuat Logika dengan JavaScript

Selanjutnya, kita akan membuat logika dengan JavaScript untuk menampilkan dan menyembunyikan popup. Pertama-tama, kita mendapatkan elemen pop-up dan tombol tutup dengan document.getElementById. Kemudian, kita membuat fungsi untuk menampilkan dan menyembunyikan popup.

var popup = document.getElementById("popup");
var tutup = document.getElementById("tutup");

function tampilkanPopup() {
     popup.className = "popup-tampil";
}

function sembunyikanPopup() {
     popup.className = "popup-hidden";
}

tutup.addEventListener("click", sembunyikanPopup);

Langkah 4: Mengetes Popup

Setelah semuanya siap, kamu bisa mencoba popup dengan memanggil fungsi tampilkanPopup() di console JavaScript atau menambahkannya ke sebuah event seperti onclick.

<button onclick="tampilkanPopup()">Tampilkan Popup</button>

Kesimpulan

Membuat popup dengan JavaScript tidaklah sulit. Dengan prinsip dasar ini, kamu bisa menambahkan lebih banyak fungsi dan interaksi ke dalam popup kamu, seperti menambahkan form input atau animasi. Tetap berlatih dan eksplorasi kemungkinan-kemungkinan lainnya!