Cara Membuat Modal Responsive Dengan HTML, CSS dan Javascript

Restu Kersana

12 Feb, 2023

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>

Selanjutnya masuk ke file css nya, tambahkan script seperti dibawah ini.

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;
  }
}

Terakhir, masuk ke file javascriptnya dan masukkan script dibawah ini agar modalnya bisa dijalankan.

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.

Restu Kersana

Calon Jenazah, pengen hidup enak tapi gini - gini aja.