Cara Membuat Modal Box

Di bawah ini kita akan mempelajari cara membuat Modal Box dengan menggunakan CSS dan JavaScript.

Section Artikel

1 Cara Membuat Modal Box
2 Modal Box Dengan Header dan Footer
- 2.1 Cara Menambahkan header dan footer
3 Modal Box Bottom (“Bottom sheets”)

Cara Membuat Modal Box

Modal adalah kotak dialog / jendela popup yang ditampilkan di atas halaman saat kita mengklik button yang ada pada halaman, seperti ini contohnya:

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

/* The Modal (background) */
.modal {
  display: none; /* Disembunyikan secara default */
  position: fixed; /* Posisi tetap */
  z-index: 1; /* Posisi tetap di atas */
  padding-top: 100px; /* Lokasi box */
  left: 0;
  top: 0;
  width: 100%; /* lebar maksimum */
  height: 100%; /* tinggi maksimum */
  overflow: auto; /* Aktifkan scrolling jika perlu */
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0,0.4); /* warna hitam dengan opacity */
}

/* Konten untuk Modal box  */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Button Close  */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

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

  <!-- Konten Modal Box -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Contoh teks pada modal box</p>
  </div>

</div>

<script>
// dapatkan modalnya
var modal = document.getElementById("myModal");

// Dapatkan button yang membuka modal
var btn = document.getElementById("myBtn");

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

// Ketika pengguna mengklik button, buka modal 
btn.onclick = function() {
  modal.style.display = "block";
}

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

// Saat mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Berikut ini langkah-langkah pembuatan modal box menggunakan css dan javascript :

Langkah 1) Tambahkan HTML:
Contoh

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

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

  <!-- Konten Modal Box -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Contoh teks pada modal box</p>
  </div>

</div>

Langkah 2) Tambahkan CSS:
Contoh

/* The Modal (background) */
.modal {
  display: none; /* Disembunyikan secara default */
  position: fixed; /* Posisi tetap */
  z-index: 1; /* Posisi tetap di atas */
  padding-top: 100px; /* Lokasi box */
  left: 0;
  top: 0;
  width: 100%; /* lebar maksimum */
  height: 100%; /* tinggi maksimum */
  overflow: auto; /* Aktifkan scrolling jika perlu */
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0,0.4); /* warna hitam dengan opacity */
}

/* Konten modal box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% dari atas dan tengah */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}

/* Button Close  */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

Langkah 3) Tambahkan JavaScript:
Contoh

<script>
// dapatkan modalnya
var modal = document.getElementById("myModal");

// Dapatkan button yang membuka modal
var btn = document.getElementById("myBtn");

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

// Ketika pengguna mengklik button, buka modal 
btn.onclick = function() {
  modal.style.display = "block";
}

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

// Saat mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Modal Box Dengan Header dan Footer

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

/* The Modal (background) */
.modal {
  display: none; /* Disembunyikan secara default */
  position: fixed; /* Posisi tetap */
  z-index: 1; /* Posisi tetap di atas */
  padding-top: 100px; /* Lokasi box */
  left: 0;
  top: 0;
  width: 100%; /* lebar maksimum */
  height: 100%; /* tinggi maksimum */
  overflow: auto; /* Aktifkan scrolling jika perlu */
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0,0.4); /* warna hitam dengan opacity */
}

/* Konten Modal Box */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Tambahkan animasi */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* Button Close  */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
</style>
</head>
<body>

<h2> Contoh Modal Animasi dengan Header dan Footer</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Tuliskan teks</p>
      <p>Hello Semua!</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Dapatkan modalnya
var modal = document.getElementById("myModal");

// Dapatkan button yang membuka modal
var btn = document.getElementById("myBtn");

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

// Ketika  mengklik button, maka modal akan terbuka
btn.onclick = function() {
  modal.style.display = "block";
}

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

// Saat  mengklik di mana saja di luar modal, maka tutuplah
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Cara Menambahkan header dan footer

Tambahkan class untuk modal-header, modal-body dan modal-footer:
Contoh

<!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <h2>Modal Header</h2>
  </div>
  <div class="modal-body">
    <p>Some text in the Modal Body</p>
    <p>Some other text...</p>
  </div>
  <div class="modal-footer">
    <h3>Modal Footer</h3>
  </div>
</div>

Style pada modal header, body dan footer, dan tambahkan animasi (slide dalam modal):

Contoh

/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Tambahkan animasi */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

Modal Box Bottom (“Bottom sheets”)

Contoh tentang cara membuat modal lebar penuh yang meluncur dari bawah:
Contoh

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

/* The Modal (background) */
.modal {
  display: none; /* Disembunyikan secara default */
  position: fixed; /* Tetap di tempat */
  z-index: 1; /*tetap di atas */
  left: 0;
  top: 0;
  width: 100%; /* Lebar maksimum */
  height: 100%; /* tinggi maksimim */
  overflow: auto; /* Tambahkan scrolling jika butuh */
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0,0.4); /* Warna hitam degnan opacity */
  -webkit-animation-name: fadeIn; /* Fade in pada background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Tambahkan animasi */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
</style>
</head>
<body>

<h2>Bottom Modal</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Sebuah text di tulis di modal-body</p>
      <p>Hallo Semua!</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Dapatkan modalnya
var modal = document.getElementById("myModal");

// Dapatkan button yang membuka modal
var btn = document.getElementById("myBtn");

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

// Ketika mengklik button, maka buka modal 
btn.onclick = function() {
  modal.style.display = "block";
}

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

// Saat  mengklik di mana saja di luar modal, maka tutuplah modalnya
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

CSS How To

Cara Membuat Modal Box

Cara Membuat Modal Box

Modal Box Dengan Header dan Footer

Cara Menambahkan header dan footer

Modal Box Bottom (“Bottom sheets”)

Cara Membuat Fullscreen Video

Cara Membuat Modal Konfirmasi Delete

You may also like