Cara Membuat Modal Images

Belajar cara membuat Modal Image yang responsif dengan CSS dan JavaScript.

Section Artikel

1 Gambar Modal

Gambar Modal

Modal adalah kotak dialog/jendela popup yang ditampilkan di atas halaman saat ini.

Contoh ini menggunakan sebagian besar kode dari contoh sebelumnya, Modal Boxes, hanya saja dalam contoh ini kita menggunakan gambar.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>Dalam contoh ini, kami menggunakan CSS untuk membuat modal (kotak dialog) yang disembunyikan secara default.</p>
<p>Kami menggunakan JavaScript untuk memicu modal dan untuk menampilkan gambar saat ini di dalam modal saat diklik. Perhatikan juga bahwa kami menggunakan nilai dari atribut "alt" gambar sebagai teks keterangan gambar di dalam modal.</p>

<img id="myImg" src="https://dosenit.com/wp-content/uploads/2020/12/img_snow_wide.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>

var modal = document.getElementById("myModal");

var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}
</script>

</body>
</html>

Langkah 1) Tambahkan HTML

Contoh:

 <!-- Pemicu Modal -->
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- Modal -->
<div id="myModal" class="modal">

  <!-- Tombol Close -->
  <span class="close">&times;</span>

  <!-- Konten Modal (Gambar) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

Langkah 2) Tambahkan CSS

Contoh:

/* Style Gambar yang Digunakan untuk Memicu Modal */

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* Modal (background) */
.modal {
  display: none; /* Tersembunyi secara default*/
  position: fixed; /* Tetap ditempat */
  z-index: 1; /* Tetap diatas */
  padding-top: 100px; /* Lokasi kotak */
  left: 0;
  top: 0;
  width: 100%; /* lebar penuh */
  height: 100%; /* tinggi penuh */
  overflow: auto; /* Aktifkan scroll jika dibutuhkan */
  background-color: rgb(0,0,0); /* Warna Fallback */
  background-color: rgba(0,0,0,0.9); /* Hitam dengan opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Lebar Sama dengan Gambar */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Tambahkan Animasi - Memperbesar Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* Tombol Close */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Lebar Gambar pada Layar yang Lebih Kecil */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

Langkah 3) Tambahkan JavaScript

Contoh:

// Mendapatkan modal
var modal = document.getElementById("myModal");

// Dapatkan gambar dan sisipkan di dalam modal - gunakan teks "alt" sebagai keterangan
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Dapatkan elemen <span> yang menutup modal
var span = document.getElementsByClassName("close")[0];

// Saat pengguna mengklik <span> (x), tutup modal
span.onclick = function() {
  modal.style.display = "none";
}

How To

Cara Membuat Modal Images

Gambar Modal

Langkah 1) Tambahkan HTML

Langkah 2) Tambahkan CSS

Langkah 3) Tambahkan JavaScript

Apa itu SAP NetWeaver ?

Cara Membuat Lightbox

You may also like