Notifikasi
Tidak ada notifikasi baru.
Beranda Bahasa Pemrograman HTML

Cara Mudah Membuat Pop Up Menggunakan HTML

Yosa AP
Yosa AP
---
Cara mudah membuat pop up dengan menggunakan HTML - Halo kembali lagi di tutorialkomputer.net, pada kesempatan kali ini saya akan membahas tentang bagaimana membuat Pop Up menggunakan HTML. Sudah pernah dengar sebelumnya tentang Pop Up? jika sudah pernah mari kita langsung menuju ke tutorialnya. Jika belum pernah dengar, tenang saja akan saya jelaskan terlebih dahulu tentang apa itu Pop Up dan apa saja kegunaannya.

Tutorial membuat Pop Up di HTML
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.


Fungsi PopUp


Setelah kita tahu apa itu Pop Up sekarang kita beralih ke apa fungsi dari Pop Up itu sendiri. Ada beberapa fungsi dari Pop Up, beberapa diantaranya adalah sebagai berikut.

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.

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


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.

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.


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

Bahasa Pemrograman HTML
Yosa AP
Yosa AP
Guru, Desainer, Programmer
Gabung dalam percakapan
Posting Komentar