Thursday, May 28, 2015

Membuat Popup Sederhana Menggunakan CSS3

Membuat Popup Sederhana Menggunakan CSS3

Pembahasan kali ini ingin sedikit membahas CSS, Kali ini kita akan coba membuat membuat sebuah popup atau modals (jika menggunakan bootstrap). Untuk membuat popup saya hanya menggunakan CSS biasa tanpa memakai framework CSS seperti bootstrap dan lain-lain. Kode ini bisa di terapkan pada blogspot ataupun wordpress.

KODE

Pertama buat file baru dengan nama index.html

<html>
<head>
<title>Popup Kang-cahya.com</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<!-- Isi Popup -->
<h1>Mohon Bantuannya Ya :-)</h1>
<p style="font-size:19px;">Telah Dilakukan Migrasi Server, Jika anda menemukan link demo atau download yang rusak harap laporkan melalui menu <a href="http://www.kang-cahya.com/p/contact-page.html"><b>contact us</b></a>. Jangan lupa cantumkan judul beserta link halaman-nya.</p>
<p style="font-size:20px;text-align:right;">Terimakasih :)</p>
<!-- Tombol Close Popup -->
<a class="popup-close" href="#popup">X</a>
</div>
</div>
</body>
</html>

Kedua, buat file baru dengan nama popup.css .

/* Start animasi popup */
@-webkit-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@-moz-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
/* end animasi popup */
/*style untuk popup */
#popup {
z-index:1000;
background-color: rgba(0,0,0,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}
#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}

Demo
Membuat Popup Sederhana Menggunakan CSS3

Mungkin cukup sekian dulu untuk pembahasan kali ini. Mohon maaf jika banyak salah dalam penyampaian materi-nya hehehe :D


Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

3 komentar

cara agar bisa di scroll isi popup nya gimana ya mas?

Mantap Tutorial Sangat membantu


EmoticonEmoticon