Membuat Modal Popup HTML Dengan JavaScript Beserta CSS

Halo semuanya pada artikel kali ini alafgani.web.id akan membagikan cara membuat modal popup di HTML dengan Javascript. Modal Popup biasa digunakan untuk memberikan notifikasi seperti promo, berita, informasi penting yang ditawarkan kepada pengunjung website. Selain itu, membuat modal popup ini sangatlah penting untuk kebutuhan website dalam keunikan dan meningkatkan citra profesional website. Namun bagaimana cara membuat popup ini? langsung saja tanpa panjang lebar kita masuk kedalam cara membuatnya.

Baca Juga : Cara Membuat Banner Slider HTML dan JavaScript

Membuat Modal Popup

Modal Popup

Sebelum Anda membuatnya, Buatlah folder ModalPopup dan buat file baru index.html, style.css, dan javascript.js di texteditor pilihan Anda. Setelah Anda selesai membuatnya ketikan kode berikut ini:

index.html

<button class="trigger">Klik Modal Popup Disini!</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Hello, Aku adalah modal popup yang Anda buat!</h1>
</div>
</div>

style.css

.trigger{
text-align: center;
padding: 7px 13px;
background:green;
color: #fff;
font-size: 15px;
outline: none;
border: none;
border-radius: 5px;
font-family: cursive;
}

.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color:green;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

javascript.js

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

 

Sekarang Anda buka file index.html, Selanjutnya Anda akan diarahkan ke browser dan akan melihat hasil dari modal popup yang sudah Anda buat. Kira-kira hasilnya seperti ini:

membuat modal popup

Auto Modal Popup

Cara kedua adalah kita akan membuat modal popup yang otomatis tanpa harus mengklik tombol tertentu dengan kata lain modal popup akan muncul ketika website diakses. berikut inilah kodenya:

index.html

<!-- MODAL -->
<div class="overlay">
<div class="modal">

<button id="close-modal-btn">Tutup</button>
<p> Halo aku adalah modal popup otomatis</p>
</div>
</div>

style.css

* {
padding: 0;
margin: 0;
}

.overlay {
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
}

.modal {
max-width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: white;
}

.show-modal {
opacity: 1;
animation: show 0.2s;
}

@keyframes show {
from {
opacity: 0;
transform: scale(0); 
}
to {
opacity: 1;
transform: scale(1);
}
}

.hide-modal {
opacity: 0;
animation: hide .25s;
}

@keyframes hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}

javascript.js

const modal= document.querySelector(".overlay");

setTimeout(function() { 
modal.classList.add("show-modal");
}, 1000);

document.querySelector("#close-modal-btn").addEventListener("click", () => {
modal.classList.remove("show-modal");
modal.classList.add("hide-modal");
})

 

Akses index.html, maka modal popup akan muncul secara otomatis. seperti inilah hasilnya:

membuat modalpopup

Penutup

Cobalah dengan mengetik ulang dan melihat setiap baris kode agar Anda bisa memahami cara kode ini bekerja, Kami yakin pasti Anda sudah memahaminya dengan cepat. karena dengan melihat kode yang sederhana ini Anda akan lebih mudah mempelajari dan mengembangkan kode diatas.

Semoga artikel ini bermanfaat, jangan lupa klik tombol sharenya ya!

 

Leave a Comment