Cara Membuat Modal Box Dengan Header dan Footer

Modal box berfungsi untuk memberikan informasi kepada pengunjung internet saat mengklik tombol atau elemen tertentu dihalaman website / blog.

Modal itu sama halnya dengan pop-up window atau jendela munculan, tapi tidak terbuka pada tab baru, melainkan pada halaman web itu sendiri.

Untuk membuatnya yang diperlukan adalah CSS dan JavaScript. Jika ingin digunakan pada tombol, buatlah CSS tombol khusus untuk tombol Modal. Contohnya sebagai berikut;

CSS BUTTON

Sebelumnya buat terlebih dahulu tombol khusus untuk Modal (supaya gampang diingat). Tambahkan pada deretan kode CSS di template, jika bingung terapkan diatas kode ]]></b:skin>.

CSS Button

#modalbutton {
  background-color: #00995A;
  border: none;  display: inline-block;
  padding: 10px 25px;
  margin: 8px 5px;
  cursor: pointer;
}

Note:

Untuk style / gaya tombol lihat disini.

CSS MODAL

Setelah membuat CSS untuk tombolnya, sekarang tinggal CSS untuk Modal. Contoh;

CSS Modal

/* Warna latar Modal */
.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.4);
}

/* Konten */
.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;
}

/* 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}
}

/* Tombol Penutup */
.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;
}

Note:

Sesuaikan dengan keinginan masing-masing ya!!! 😁

CARA PENERAPAN

Untuk menerapkannya diblog, kamu cukup buat kode HTML button dengan id, konten Modal dan JavaScript untuk menjalankan Modal. Contoh;

Tombol & Konten Modal

<!-- Tombol -->
<button id="modalbutton">TOMBOL MODAL</button>

<!-- Modal -->
<div id="myModal" class="modal">
<!-- Konten Modal -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">×</span>
    <h2>Teks Header</h2>
  </div>
  <div class="modal-body">
    <p>Paragraf teks disini</p>
  </div>
  <div class="modal-footer">
    <h3>Teks Footer</h3>
  </div>
</div>
</div>

Gunakan tag <script type="text/javascrip">_tempatkan javascript disini_</script>

Tambahkan JavaScript

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

// Perintah untuk membuka Modal pada id tombol
var btn = document.getElementById("modalbutton");

// Untuk memunculkan elemen X atau tombol penutup
var span = document.getElementsByClassName("close")[0];

// Untuk membuka Modal saat mengklik tombol
btn.onclick = function() {
    modal.style.display = "block";
}

// Untuk menutup Modal saat mengklik X
span.onclick = function() {
    modal.style.display = "none";
}

// Untuk menutup Modal saat mengklik sembarang
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

DEMO

×

Contoh

Hello!
Nama kamu siapa? kenalan dong...

by Cowok gak Modal

Jangan lupa, untuk menerapkan kode HTML & JavaScript buatlah pada HTML Editor.