Membuat Popup Modal menggunakan Javascript dan Css

Pada artikel sebelumnya saya sudah menjelaskan cara menampilkan file hidden .htaccess di cpanel.

Lain cerita dengan artikel sebelumnya, pada artikel kali ini yang saya akan coba bahas adalah cara membuat modal pop up about keren dengan css animasi dan js.

Bicara tentang about, yang dimana kita telah ketahui jika diartikan kedalam bahasa indonesia yaitu "Tentang" atau bisa juga berupa sebuah informasi mengenai seseorang ataupun tentang website itu sendiri.

Kenapa harus ada about? Karena peran about ini sangatlah penting didalam sebuah website, blog dan lain-lain. Gunanya untuk memudahkan para pengunjung, dikala mereka ingin tahu siapakah dan apa tujuan dari website ini yang sebenarnya.

Bagaimana menurut kalian, sudah pahamkan arti dari about? Kalau sudah mari kita lanjutkan kepembahasan intinya.

Modal box about yang akan kita bahas kali ini yaitu menggunakan bantuan CSS dan disini saya sedikit mencampurnya dengan taburan JAVASCRIPT  ditambah dengan animasi, agar terlihat bagus dan mempesona.

Bagaimana Cara Membuatnya?

Oke tanpa berlama-lama lagi langsung saja kita praktekan saat ini juga.
Perhatikan dan simak baik-baik dibawah ini:

Langkah yang pertama yaitu, buatlah sebuah file style.css lalu salin kode css berikut:

/* Modal (background) */
.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.8);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border-radius:5px;
  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
}
.btn {
     background:none;
     border:solid 2px #afafaf;
     color:#afafaf;
     font-size:18px;
     font-weight:bold;
     margin-left:115px;
     text-align:center;
}
.btn:hover {
     background:#333;
}

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

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

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

.modal-header {
  padding: 2px 16px;
  background:#48d1cc;
  background:linear-gradient(#48d1cc, #49ACE1);
  color: white;
  height:auto;
}
.modal-header img {border-radius:100%;padding:10px;width:120px;height:120px;}

.modal-body {padding: 2px 16px;height:auto;}
.modal-body p {color:#afafaf;}

.modal-footer {
  padding: 2px 16px;
  background:#48d1cc;
  background:linear-gradient(#48d1cc, #49ACE1);
  color: white;
  height:auto;
}

Langkah selanjutnya adalah, kalian buat file html nya dan salin kode berikut ini:

<!-- Trigger/Open The Modal -->
<button id="myBtn" class="btn">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>
      <img src="yourpic" alt="mypic"/>
    </div>
    <div class="modal-body">
      <p>Your Name</p>
      <p>Your Age</p>
      <p>Your Hoby</p>
    </div>
    <div class="modal-footer">
      <h3>Regard: </h3>
    </div>
  </div>

</div>

Kalau sudah selesai, lanjut dengan membuat file javascript. contoh: modal.js lalu salin kode dibawah dan tempel di dalam modal.js tersebut:

<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Jika kalian sudah selesai membuat semua file nya dengan mengikuti langkah-langkah yang telah saya jelaskan diatas, waktunya kalian akses dan lihat hasilnya. Apakah berkerja atau tidak!

Apabila terjadi eror atau kesalahan, mungkin kalian tidak sepenuhnya mengikuti langkah diatas ataupun ada kode yang terhapus atau bisa juga kurang. Karena kode-kode tersebut sudah saya coba sebelum saya postingkan dan hasilnya work.

Adapun saya lampirkan untuk live demonya, agar kalian dapat melihatnya dengan langsung:

Live Demo

Explore dengan cara kalian masing-masing dan edit sebaik mungkin, agar terlihat lebih elegan dan menarik.

Mungkin saya rasa cukup untuk pembahasan kali ini, apabila ada pertanyaan silahkan tinggalkan komentar kalian.

Itulah modal popup keren. Mudah-mudahan artikel ini bermanfaat dan menambah pengetahuan kalian.

Akhir kata saya ucapkan terimakasih dan sampai bertemu kembali pada artikel selanjutnya.

Virm Aditya

Berita teknologi informasi terkini

Share this post