Dengan kemajuan teknologi programming yang sangat cepat kita sering kali mengerjakan aplikasi dengan pemberian framework dan library. Salah satu teladan pada web development yaitu bootstrap dan jquery yang sangat gampang dipakai serta tampilan yang sudah rensponsif menciptakan kita tidak perlu menciptakan semua dari dasar.
Kita tidak akan sanggup menjadi benar-benar professional jikalau tidak mengerti dasar-dasar pembuatannya, sebagai teladan jikalau kita ingin menciptakan modal (pop-up), pada bootstrap kita cukup memanggil class serta memanggil jquery yang menciptakan kita tidak mengerti alur dan proses cara kerjanya.
Kali ini kita akan menciptakan modal sederhana dari dasar biar kita mengetahui alur dari pada framework dan library javascript yang sudah cukup fenomenal ibarat jquery dan bootstrap.
Agar lebih gampang memahaminya kita menciptakan 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 sanggup 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">×</span> <h2>Modal Header</h2> </div> <div class="modal-body"> <p>Hallo... aku 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 dibutuhkan anda sudah mengerti wacana element-element dan properti-propertinya ibarat ID dan Class yang sanggup dipanggil dengan javascript.
Membuat File style.css
style.cssSaya akan terangkan sedikit mengenai code html dan css diatas.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}
}
Dibawah elemen button terdapat elemen div dengan class modal, class modal di css yaitu memiliki 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 ibarat teladan diatas).
Kemudian kita akan meminta pemberian javascript untuk merubah value pada property display menjadi block.
Makara awalnya propertinya memiliki value
display: none; jikalau di klik button javascript akan merubah display: block; . Teknologi ini disebut JavaScript DOM.Membuat File main.js
modal.jsKuncinya yaitu pada property display: none; diubah dengan pemberian javascript menjadi display: block; pada ketika tombol button di klik, begitu juga ketika tombol close diklik, javascript akan mengembalikan nilai property menjadi display: none; pada class modal.// 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];// jikalau tombol di klik maka akan memanggil function open modal
modalBtn.addEventListener('click', openModal);
// jikalau tombol di klik maka akan memanggil function close modal
closeBtn.addEventListener('click', closeModal);
// jikalau 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 jikalau di klik diluar modal (outside click)
function outsideClick(e){
if(e.target == modal){
modal.style.display = 'none';
}
}
Sumber : DEMO