Membuat Modal Dengan Javascript Tanpa Framework dan Library

Dengan kemajuan teknologi programming yang sangat cepat kita sering kali mengerjakan aplikasi dengan bantuan framework dan library. Salah satu contoh pada web development adalah bootstrap dan jquery yang sangat mudah digunakan serta tampilan yang sudah rensponsif membuat kita tidak perlu membuat semua dari dasar.

Kita tidak akan bisa menjadi benar-benar professional jika tidak mengerti dasar-dasar pembuatannya, sebagai contoh jika kita ingin membuat modal (pop-up), pada bootstrap kita cukup memanggil class serta memanggil jquery yang membuat kita tidak mengerti alur dan proses cara kerjanya.

Kali ini kita akan membuat modal sederhana dari dasar agar kita mengetahui alur dari pada framework dan library javascript yang sudah cukup fenomenal seperti jquery dan bootstrap.

Agar lebih mudah memahaminya kita membuat menjadi 3 buah file yaitu index.html, style.css, modal.js

Membuat File index.html

Pada file index.html kita buat sederhana saja hanya ada tombol/button yang untuk selanjutnya Anda dapat mengembangkannya lagi.

index.html

<!DOCTYPE html>

<html>

<head>

 <title>Document</title>

 <link rel="stylesheet" href="style.css">

</head>

<body>

  <button id="modalBtn" class="button">Klik Disini</button>

  <div id="simpleModal" class="modal">

    <div class="modal-content">

      <div class="modal-header">

          <span class="closeBtn">&times;</span>

          <h2>Modal Header</h2>

      </div>

      <div class="modal-body">

        <p>Hallo... saya modal</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla repellendus nisi, sunt consectetur ipsa velit repudiandae aperiam modi quisquam nihil nam asperiores doloremque mollitia dolor deleniti quibusdam nemo commodi ab.</p>

      </div>

      <div class="modal-footer">

        <h3>Modal Footer</h3>

      </div>

    </div>

  </div>

  <script src="modal.js"></script>    

</body>

</html>

Kemudian buat file css nya didalam folder yang sama dengan index.html, disini diharapkan anda sudah mengerti tentang element-element dan properti-propertinya seperti ID dan Class yang dapat dipanggil dengan javascript.

Membuat File style.css

style.css

body{

  font-family: Arial, Helvetica, sans-serif;

  font-size:17px;

  line-height:1.6;

}

.button{

  background:green;

  padding:1em 2em;

  color:#fff;

  border:0;

}

.button:hover{

  background:#333;

}

.modal{

  display:none;

  position: fixed;

  z-index:1;

  left: 0;

  top:0;

  height: 100%;

  width:100%;

  overflow: auto;

  background-color: rgba(0,0,0,0.5);

}

.modal-content{

  background-color:#f4f4f4;

  margin: 20% auto;

  width:70%;

  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);

  animation-name:modalopen;

  animation-duration:1s;

}

.modal-header h2, .modal-footer h3{

  margin:0;

}

.modal-header{

  background:coral;

  padding:15px;

  color:#fff;

}

.modal-body{

  padding:10px 20px;

}

.modal-footer{

  background:coral;

  padding:10px;

  color:#fff;

  text-align: center;

}

.closeBtn{

  color:#ccc;

  float: right;

  font-size:30px;

  color:#fff;

}

.closeBtn:hover,.closeBtn:focus{

  color:#000;

  text-decoration: none;

  cursor:pointer;

}

@keyframes modalopen{

  from{ opacity: 0}

  to {opacity: 1}

}

Saya akan terangkan sedikit mengenai code html dan css diatas.

Dibawah elemen button terdapat elemen div dengan class modal, class modal di css yaitu mempunyai property dan value display: none; yang artinya elemen tersebut tidak kelihatan, coba property display: none; diganti dengan property display: block; terus disimpan dan jalankan file index.html agar Anda mengerti proses alur atau cara kerja modal ini (jangan lupa untuk mengeset kembali seperti contoh diatas).

Kemudian kita akan meminta bantuan javascript untuk merubah value pada property display menjadi block.

Jadi awalnya propertinya mempunyai value display: none; jika di klik button javascript akan merubah display: block; . Teknologi ini disebut JavaScript DOM.

Membuat File main.js

modal.js

// mengambil elemen div id modal

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

// mengambil elemen button id modal

var modalBtn = document.getElementById('modalBtn');

// mengambil class closeBtn

var closeBtn = document.getElementsByClassName('closeBtn')[0];

// jika tombol di klik maka akan memanggil function open modal

modalBtn.addEventListener('click', openModal);

// jika tombol di klik maka akan memanggil function close modal

closeBtn.addEventListener('click', closeModal);

// jika tombol di klik maka akan memanggil function outside click

window.addEventListener('click', outsideClick);

// Function untuk open modal

function openModal(){

  modal.style.display = 'block';

}

// Function untuk close modal

function closeModal(){

  modal.style.display = 'none';

}

// Function untuk close modal jika di klik diluar modal (outside click)

function outsideClick(e){

  if(e.target == modal){

    modal.style.display = 'none';

  }

}

Kuncinya adalah pada property display: none; diubah dengan bantuan javascript menjadi display: block; pada saat tombol button di klik, begitu juga ketika tombol close diklik, javascript akan mengembalikan nilai property menjadi display: none; pada class modal.

Sumber : DEMO