Pop-up konfirmasi dibuat menggunakan HTML, CSS dan JavaScript. HTML berisi elemen yang menggelontorkan pop-up dan elemen pop-up itu sendiri. CSS memposisikan dan mendekorasi elemen-elemen tersebut. JavaScript menangani interaksi pengguna dengan menampilkan dan menyembunyikan pop-up saat elemen dilakukan klik atau tombol 'escape' ditekan.

1. Pop-Up
Konfirmasi
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Kita sering sekali melihat pop-up dalam sebuah situs. Bisa saja itu
berupa iklan yang tidak jelas, maupun yang tujuannya jelas seperti
login ataupun konfirmasi.
Pada materi ini, Kita akan mencoba membuat pop-up yang dipakai
untuk konfirmasi.

3. HTML
<a href=”#” class="popup-trigger">Pop-up</a>
<div class="popup" role="alert">
<div class="popup-container">
<p>Apakah Anda yakin?</p>
<ul class="popup-buttons">
<li>
<a class="popup-close" href=”#”>
Tidak
</a>
</li>
<li>
<a href=”#”>Ya</a>
</li>
</ul>
</div>
</div>
Implementasi Pop-up - 1
Seperti biasa, Kita buat dulu kerangka
HTML-nya yang terdiri dari elemen yang
men-trigger dan popup itu sendiri.
Komponen popup adalah overlay layar
(class popup), container (kelas popup
container), dan konten dengan tombol
konfirmasinya.

4. CSS
body {
font-size: 100%;
font-family: “Lato”, sans-serif;
color: #333;
background-color: #333;
}
a {
color: #35a785;
text-decoration: none;
}
Jika Anda mencoba membuatnya dengan
aplikasi seperti web app codepen,
jsfiddle, dll, Anda bisa menambah style
umum supaya hasil lebih terlihat seperti
yang dibuat pada CSS di samping.
Tetapi jika Anda hanya ingin menambah
atau memodifikasi dengan style Anda
sendiri, Anda bisa mendefinisikannya
sesuka Anda tanpa mengikuti tahap ini.
Implementasi Pop-up - 2

5. CSS
.popup-trigger {
display: block;
width: 100px;
height: 50px;
line-height: 50px;
margin: 5em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-weight: bold;
background: #135CAB;
box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
Sekarang Kita akan menambahkan style
untuk popup trigger Kita yang akan
menampilkan popup ketika ditekan.
Contoh hasil di codepen:
Implementasi Pop-up - 3

6. CSS
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s visibility 0s
0.3s;
}
Sebelumnya masih terlihat bahwa ada
tulisan konfirmasi di bawah kiri.
Sekarang Kita akan jadikan popup
dengan menyembunyikannya
menggunakan style yang Kita akan
definisikan.
Pastikan popup memenuhi ukuran layar
supaya Kita bisa memasang overlay
elemen, dan sembunyikan popup dengan
visibility hidden.
Implementasi Pop-up - 4

7. CSS
.visible {
opacity: 1;
visibility: visible;
transition: opacity 0.3s 0s visibility 0s
0.3s;
}
.visible .popup-container {
transform: translateY(0);
}
Lalu kita buat sebuah kelas visible yang
mampu membuat elemen muncul ketika
sebuah elemen disisipkan kelas tersebut.
Kelas ini akan dipakai nanti pada saat Kita
membuat javascript untuk interaksi dari
popup.
Saat ini elemen popup sudah
tersembunyi, hanya menyisakan sebuah
tombol untuk men-triggernya yaitu tombol
popup.
Implementasi Pop-up - 5

8. CSS
.popup-container {
position: relative;
width: 90%;
max-width: 400px;
margin: 5em auto;
background: #FFF;
border-radius: .2em .2em .45em .45em;
text-align: center;
box-shadow: 0 0 20px rgba (0,0,0,0.2);
/* animasi */
transform: translateY(-40px);
transition-property: transform;
transition-duration: 0.3s;
}
.popup-container p {
padding: 3em 1em;
}
Berikutnya Kita buat style untuk kotak
yang menampung konten dari popup.
Kotak ini akan mempunyai lebar terbatas
(400px) supaya tidak terlalu besar dan
ada di tengah-tangah layar dengan
margin auto yang didefinisikan.
Selain itu Kita juga beri pemanis animasi
pada stylenya.
Implementasi Pop-up - 6

9. CSS
.popup-buttons {
padding: 0;
list-style: none;
}
.popup-container .popup-buttons:after {
/* clear */
content: “”;
display: table;
clear: both;
}
Elemen yang perlu diberi style berikutnya
adalah popup-buttons atau tombol untuk
konfirmasi.
Namun, sebelum tombol diberikan style,
ada baiknya Kita bersihkan (clear) terlebih
dahulu style bawaan dari elemen yang
Kita pakai.
Implementasi Pop-up - 7

10. CSS
.popup-container .popup-buttons li {
float: left;
width: 50%;
}
.popup-container .popup-buttons a {
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
transition: background-color 0.25s;
}
Berikutnya berikan style untuk menyusun
button yang ada dalam kotak popup.
Button akan disusun berjajar dari kiri ke
kanan, maka dari itu diberikan style float.
Kemudian karena button yang dibuat ada
2 saja, maka lebar tiap button adalah 50%
supaya bisa memenuhi lebar kotak ketika
dijajarkan.
Implementasi Pop-up - 8

11. CSS
.popup-container .popup-buttons li:first-child
a {
background: #7484A3;
border-radius: 0 0 0 .25em;
}
.popup-container .popup-buttons li:first-child
a:hover{
background: #414C63;
}
.popup-container .popup-buttons li:last-child
a {
background: #53AD7F;
border-radius: 0 0 .25em 0;
}
.popup-container .popup-buttons li:last-child
a:hover{
background: #387556;
}
Kita juga akan membedakan tiap button
dengan dua warna yang berbeda dan
menambahkan kelakuannya ketika mouse
masuk ke area button atau hover.
Masing-masing button “tidak” dan “iya”
akan Kita beri warna biru dan hijau. (Anda
bebas menggantinya)
Implementasi Pop-up - 9

12. Javascript (JQuery)
$(document).ready(function($) {
$('.popup-trigger').on('click', function(event) {
event.preventDefault();
$('.popup').addClass('visible');
});
$('.popup').on('click', function(event) {
if($(event.target).is('.popup-close') || $(event.target).is('.popup')) {
event.preventDefault();
$('this').removeClass('visible');
}
});
$(document).keyup(function(event) {
if(event.which == '27') {
$('popup').removeClass('visible');
}
});
});
Implementasi Pop-up - 10

13. Penjelasan javascript (Jquery): Jquery akan menangkap event klik dari
pengguna.
● Apabila event klik yang ditangkap adalah pada popup trigger, maka
tambahkan kelas visible pada popup sehingga popup muncul ke
layar.
● Apabila event klik yang ditangkap adalah elemen dengan kelas
popup-close yaitu tombol tidak atau ketika pengguna menekan
tombol “escape”, maka hilangkan kelas visible pada popup
sehingga popup disembunyikan kembali.
o Selalu cegah tindakan default dari tag anchor text sehingga
tidak pindah halaman situs
Implementasi Pop-up - 10

14. Finalisasi
Setelah popup konfirmasi selesai dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Contoh dapat dilihat pada Codepen Kuliahkita