Cara Mudah Membuat Pop Up Menggunakan HTML

Yosa AP
---
Tutorial membuat Pop Up di HTML |
Daftar isi
Pengertian Pop Up
Mungkin kalian sudah pernah mendengar kata Pop Up di beberapa artikel. Biasanya Pop Up sering muncul ketika kita sedang mengoperasikan komputer maupun sedang berselancar di internet. Lantas apakah itu Pop Up?
Dalam kehidupan sehari-hari saat kalian menggunakan komputer, mengakses internet dan sebagainya. Kadang kalian menemukan jendela melayang pada saat kalian mengklik sebuah kata tertentu. Jendela melayang tersebut bisa berupa notifikasi, peringatan, iklan dan lain sebagainya. nah jendela melayang inilah yang dimaksud dengan Pop Up.
Contohnya seperti ketika kita sedang membaca berita disuatu web kemudian tiba-tiba muncul notifikasi iklan melayang yang mana kita harus menutupnya agar dapat melanjutkan membaca barita lagi.
Atau contoh lainnya, seperti saat kalian sedang berkomunikasi via WA, beberapa dari kalian pasti melihat jendela melayang ketika ada pesan masuk ke WA. Hal tersebut juga termasuk dalam salah satu contoh Pop Up.
Baca Juga : Cara Membuat Flip Card Menggunakan HTML
Fungsi PopUp
Pop Up menu. Ketika kalian klik kanan pada komputer maka akan muncul beberapa pilihan menu atau yang sering disebut Pop Up menu. Pop Up menu berfungsi untuk menampilkan beberapa menu baik itu menu dropdown maupun updown.
Setelah mengetahui apa itu Pop Up dan fungsinya, sekarang mari kita mulai tutorial membuat Pop Up nya. Untuk melihat Pop Up yang akan kita buat silahkan klik kata berikut.
Pop Up Dialog Box. Adalagi yang namanya Pop Up Dialog Box, Pop Up ini berfungsi untuk memberikan peringatan maupun informasi kepada pengguna, misalkan saat kita melakukan kesalahan saat sedang mengoperasikan komputer.
Sebagai contohnya, saat kita menutup jendela pada aplikasi Word biasanya kan muncul Pop Up yang berisi tentang bertanya apakah file akan disimpan atau tidak.
Pop Up Iklan. Seperti yang sudah dicontohkan pada awal pembahasan tadi, kita juga bisa menggunakan pop up untuk mengiklankan sesuatu. Contohnya seperti iklan yang ada pada halaman surat kabar online yang harus ditutup dulu agar kita bisa mengakses isi beritanya.
Cara Membuat Popup Sederhana dengan Menggunakan HTML
Klik saya untuk menampilkan Pop Up!
Ini Popup! :)
Untuk membuat Pop Up sederhana seperti diatas dibawah ini kodenya :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Klik saya untuk memuncuklan Pop Up!
<span class="popuptext" id="myPopup">Ini Pop Up!</span>
</div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
Untuk menguji kode skrip diatas kalian bisa menuju HTML Editor dan mengedit sepuasnya disana.
Baca Juga : Cara Membuat Animasi Loading Menggunakan HTML
Kalian bisa mencoba tutorial Pop Up yang lainnya dibawah ini :
- Cara mudah membuat Pop Up Menu Menggunakan HTML
- Tutorial membuat Pop Up Dialox Box Menggunakan HTML
Sekian tutorial dari saya seputar per Pop Up an semoga artikel ini bermanfaat dan jangan lupa meninggalkan jejak di kolom komentar ya
Posting Komentar
Posting Komentar