Modal Popup biasanya digunakan untuk memberikan notifikasi ataupun pemberitahuan kepada pengunjung blog ataupun website mengenai informasi yang ingin kita bagikan. tapi banyak juga yang menggunakannya untuk menampilkan sebuah widget blog salah satunya adalah untuk menampilkan form subscribe.
Untuk membuat sebuah Modal Popup biasanya hanya menggunakan html, css, dan juga javascript. tapi ada juga yang membuatnya menggunakan tambahan script jquery untuk memberikan efek tertentu seperti efek blind, bounce, dll agar lebih menarik. Nah, bagi anda yang ingin membuatnya kali ini saya akan membagikan informasi bagaimana cara membuat modal popup sederhana dengan menggunakan efek toggle tanpa jquery. Kenapa tanpa jquery ? alasannya sederhana saja yaitu karena lebih ringan, dan juga karena tidak semua blog maupun website menggunakannya.
Efek toggle biasanya merupakan istilah untuk sebuah tombol yang digunakan untuk menampilkan dan menyembunyikan element element tertentu seperti widget yang ada pada sebuah blog maupun website. artinya disini untuk menampilkan modal popup tersebut dilakukan secara manual yaitu dengan menggunakan tombol yang akan dibuat nantinya menggunakan html dan css. langsung saja, mari kita simak tutorialnya berikut ini:
Cara Membuat Modal Popup Sederhana Dengan Efek Toggle
<div id=”myBtn”>Open<span class=’count’>2</span></div>
<div id=”myModal” class=”modal”>
<div class=”modal-content”>
<span class=”close”>x</span>
<h4>Lorem Ipsum</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
#myBtn{background:#000;color:#fff;display:inline-block;cursor:pointer;font-size:14px;padding:10px;border-radius:2px;}
#myBtn .count{background:#555;font-size:10px;color:#fff;margin-left:10px;padding:5px;}
.modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color:rgba(0,0,0,0.4);}
.modal-content {background-color:#fff;font-size:13px;line-height:1.6em;color:#666;margin:auto;padding:20px;border:1px solid #888;width:80%;}
.modal-content h4{margin:0;font-size:18px;color:#000;line-height:2em;}
.close {color: #aaaaaa;float:right;font-size:18px;font-weight:bold;}
.close:hover,.close:focus {color:#000;text-decoration:none;cursor:pointer;}
3. Kemudian silahkan letakkan javascript berikut ditemplate yang anda gunakan atau bisa juga membuatnya secara utuh seperti berikut ini.
<script type=”text/javascript”>
var modal = document.getElementById(‘myModal’);
var btn = document.getElementById(“myBtn”);
var span = document.getElementsByClassName(“close”)[0];
btn.onclick = function() { modal.style.display = “block”; }
span.onclick = function() { modal.style.display = “none”; }
window.onclick = function(event) { if (event.target == modal) { modal.style.display = “none”; } }
</script>
Terakhir silahkan simpan template tersebut dan lihat hasilnya 🙂
