How To

Cara Membuat Modal Box

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

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>

Hanifah Nurbaeti

Share
Tags: CSSHow To