Membuat modal yang responsive bisa kamu buat dengan HTML, CSS dan Javascript. Modal yang akan saya pastinya responsive, bisa diakses oleh pengguna mobile, tablet dan desktop.
Jika sebelumnya kamu sering menggunakan framerwork css untuk membuat modal, sekarang kamu cukup menggunakan HTML, CSS dan Javascript untuk membuatnya.
Tentu pembuatan modal box ini menggunakan animasi agar gerakannya terlihat smooth. Memang dalam pembuatan aplikasi berbasis website sudah banyak menggunakan modal box untuk keperluan CRUD. Langsung saja kuy, masuk ke dalam pembuatan modal responsivenya.
Membuat Modal Responsive
Sebelum membuat modal responsive menggunakan HTML, CSS, dan Javascript,
silahkan buat file projectnya terlebih dahulu. Untuk penamaan file project
bebas atau kamu bisa mengikuti seperti ini :
- HTML = index.html
- CSS = style.css
- Javascript = script.js
Jika file project sudah dibuat, buka file index.html dan masukkan script
dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Responsive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="open-modal">Tampil Modal</button>
<div class="bg-modal">
<div class="modal">
<div class="head-modal">
<h2>Modal</h2>
<svg class="close-modal" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<div class="body-modal">
<p>Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Dolor eaque laudantium perspiciatis repellat. Rem reiciendis libero odio, omnis optio! Ea possimus corporis eveniet at culpa quia, ab. Natus ex id consequuntur molestiae animi numquam pariatur eum enim vero saepe aliquid rerum ab ea veritatis dolorum iure dignissimos, omnis dolor. Vitae.</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
}
.bg-modal {
position: fixed;
top: -250%;
left: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
z-index: 98;
transition: .5s;
display: flex;
justify-content: center;
align-items: center;
}
.bg-modal.show {
top:0;
transition: .5s;
}
.modal {
position: relative;
margin: auto;
width: 90%;
opacity: 1;
background-color: white;
z-index: 99;
height: 310px;
border-radius: 10px;
padding: 7px;
margin: 12px;
box-shadow: 0px 10px 5px rgba(0,0,0,.2);
}
.close-modal {
width: 25px;
font-weight: bold;
position: absolute;
top: -15px;
right: -10px;
padding: 7px;
background-color: white;
color: #2F2E41;
cursor: pointer;
border-radius: 30px;
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
.body-modal {
display: flex;
justify-content: center;
align-items: center;
}
/*custom sesuai keinginan untuk ukuran modalnya*/
@media screen and (min-width: 320px) {
.modal {
}
}
@media screen and (min-width: 620px) {
.modal {
width: 400px;
}
}
@media screen and (min-width: 760px) {
.modal {
}
}
@media screen and (min-width: 960px) {
.modal {
width: 400px;
}
}
const bgModal = document.querySelector('.bg-modal');
const openModal = document.querySelector('.open-modal');
const closeModal = document.querySelector('.close-modal');
openModal.addEventListener('click', function() {
bgModal.classList.add('show');
});
closeModal.addEventListener('click', function() {
bgModal.classList.remove('show');
});
Penjelasan :
Ada beberapa hal yang harus ketahui dalam pembuatan modal custom yang saya
buat. Class untuk menampilkan modalnya adalah
.open-modal, class untuk
menutup modalnya adalah
.close-modal dan class
yang di trigger oleh .open-modal adalah .bg-modal.
Agar modal terlihat lebih smooth ketika tampil dan tutup, cukup memberikan
transition. Kamu bisa mengatur kembali settingan modalnya untuk ukuran
mobile, tablet dan dekstop dalam
@media-screen berdasarkan
selector diatasnya.
Misalkan kamu ingin mengatur ukuran modalnya, kamu perlu memanggil selector
.modal dalam @media-screen yang ingin kamu rubah.
Untuk memberikan efek trigger pada classnya, saya menggunakan
addEventListener untuk
memberikan triggernya. Ketika class .open-modal di klik jalankan function di
dalamnya dan ketika lass .close-modal di klik jalankan class di dalamnya.
Penutup
Berikut pembahasan mengenai cara membuat modal responsive dengan HTML, CSS dan Javascript. Bagaimana menurut kamu mengenai tutorial diatas, apakah cukup membantu ? Silahkan jika ada pertanyaan seputar modal bisa kamu tanyakan di kolom komentar.
Terimakasih telah berkunjung ke infokuy, nantikan artikel menarik lainnya seputar CSS hanya di infokuy.
Share this Article
0 komentar :