BERITA PROGRAMMING Membuat Modal Responsive dengan Overlay Menggunakan HTML, CSS, dan JS

Membuat Modal Responsive dengan Overlay Menggunakan HTML, CSS, dan JS

Oleh Ivan Pakpahan | Rabu, 15 September 2021

Modal adalah kotak dialog yang muncul pada halaman web. Cara kerja modal adalah ketika modal dalam kondisi aktif maka dialog box akan tampil dan halaman utamanya menjadi tidak aktif, namun halaman utama tetap dapat terlihat pada jendela browser.

Daftar Isi Artikel

Apa itu Modal?

Dalam dunia pemrograman website, Modal digambarkan sebagai sebuah kotak dialog atau sering di sebut dengan pop up yang muncul pada halaman website. Modal membuat sebuah mode yang menonaktifkan halaman utama tetapi membuatnya tetap terlihat. Modal dapat digunakan untuk banyak hal seperti, menayangkan iklan, menampilkan data/informasi, atau untuk menampilkan dialog konfirmasi untuk menyatakan persetujuan terhadap aksi tertentu. Bahkan saat ini, dalam pembuatan aplikasi berbasis website lainnya, sudah banyak yang menggunakan modal untuk keperluan CRUD login dan register.

Gambar 1 : Contoh Modal

Baca Juga : Membangun usaha sampingan dengan Modal kecil

Membuat Modal Responsive dengan HTML, CSS, dan JS

Sebelum membuat modal responsive menggunakan HTML, CSS, dan Javascript, hal yang harus dilakukan pertama adalah membuat file proyeknya terlebih dahulu kedalam satu folder. Berikut adalah kode dan penjelasan dari skrip yang digunakan.

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div id="overlay" onclick="off()">
  </div>
  <div class="modal" id="modal1">
    <div class="header" id="header">
      <p>Ivan Pakpahan</p>
      <span id="modal1" class="close" onclick="off(this.id)"><i class="fas fa-times-circle"></i></span>
    </div>
    <div class="body" id="body"><center>
      <img src="https://bit.ly/3tB3lZQ"></img></center>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="modal" id="modal2">
    <div class="header" id="header">
      <p>Davy Jones</p>
      <span id="modal2" class="close" onclick="off(this.id)"><i class="fas fa-times-circle"></i></span>
    </div>
    <div class="body" id="body">
      <center><img src="https://wallpaperaccess.com/full/2367510.jpg"></img></center>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
<h2>Modal With Overlay</h2>
<div class="main">
  <div style="float:left;padding:20px; animation: slide_up 1.4s ease;">    
    <button id="modal1" onclick="on(this.id)">Modal 1</button>
  </div>
  <div style="padding:20px; animation: slide_up 1.4s ease;">
    <button id="modal2" onclick="on(this.id)">Modal 2</button>
  </div>
 </div>
</body>

Pada tag body terdiri dari beberapa elemen yang nanti akan menjadi tampilan modal, overlay, dan tampilan utamanya. Tag div dengan kelas modal akan menampung elemen pembentuk modal, sedangkan tag div dengan id "overlay" akan menjadi overlay, sementara itu tag h2 pada body dan Tag div dengan kelas "main" akan difungsikan sebagai jendela utama, dimana tag ini akan menampung 2 tombol yang akan menjadi trigger untuk mengaktifkan modal.

Ketika elemen tombol pada kelas "main" diklik, maka event "on()" akan aktif dan membawa indentitas Id dari tombol untuk diproses pada kode javascript.

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap');
*{
  font-family: 'Poppins', sans-serif;
  color: black;
}
.main{
  dislay:flex;
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: context-menu;
}
.modal{
  pointer-events:none
  text-align: center;
  background-color: whitesmoke;
  position: absolute;
  left: 0;
  margin: auto 100px;
  padding: 100px auto;
  display: none;
  color: black;
  z-index: 9999;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  animation: slide_up 1.4s ease;
}
.modal .header{
  width: 100%;
  background-color: #0baf9d;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  display: flex;
  justify-content: center;
}
.modal .header p{
  font-size: 24px;
}
.modal .header .close{
  font-size: 24px;
  cursor: pointer;
  right: 0;
  position: absolute;
  margin-right: 5px;
}
.modal .header .close i:hover{
  border-radius: 50%;
  color: white;
}
.modal .body{
  margin-top:20px;
}
.modal .body img{
  max-width:70%;
}
.modal .body p{
  font-size: 14px;
  margin: auto 50px;
  padding-bottom: 20px;
  text-align:justify;
}
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
@keyframes slide_up{
  0%{
    transform: translateY(500px);
  }
  100%{
    transform: translateY(0px);
  }
}

Elemen yang akan muncul pada kondisi awal adalah hanyalah tag h2 dan class main, karena kelas lainnya di set menjadi "display :none" artinya elemen dan juga ruangnya tidak akan ditampilkan dalam tampilan halaman browser.

Javascript

var id_aktif;
function on(clicked_id) { document.getElementById("overlay").style.display = "block";
document.getElementById(clicked_id).style.display = "block";
id_aktif = clicked_id;
}
function off() {
document.getElementById("overlay").style.display = "none";
document.getElementById(id_aktif).style.display = "none";
}

Terdapat variabel "id_aktif" yang akan menampung data dari event "on()", gunanya untuk membantu mengeksekusi modal dengan id berapa yang akan aktif ataupun tidak. Event "on()" akan mengubah properti display pada elemen overlay dan modal dengan id yang dibawa dari tombol menjadi "block". Maka kedua elemen tersebut akan tampil pada halaman web. Karena position dari overlay dan modal adalah non static dan relatif terhadap body, maka kedua elemen ini dapat diset agar muncul tepat di atas halaman utama. Untuk overlay position yang diset adalah "fixed" dengan menggunakan latar belakang yang transparan. Agar modal berada di atas overlay maka z-index modal diatur agar lebih besar dari overlay. Maka tampilannya akan seperti ini.

Gambar 2 : Modal dengan Overlay