Wednesday, 21 August 2013

Membuat Jendela Pop Up Dengan CSS

Membuat Jendela Pop Up Dengan CSS
Membuat Jendela Pop Up Dengan CSS - Ya, kali ini saya akan berbagi trick yang berjudul Cara Membuat Jendela Pop Up Dengan CSS, bagaimana cara kerja Jendela Pop Up ? nah bagi kalian yang penasaran bisa lihat contohnya dibawah ini.


Coba anda klik yang bertulisan "Click Me" pasti kalau sudah diklik akan muncul jendela baru dan bisa diclose. Cara ini cukup mudah dan kode ini tidak menggunakan JavaScript tetapi menggunakan CSS.
baik, langsung saja saya share Kodenya.

Code HTML ( Letakan di bawah <body> atau diatas kode </body>

<div id="button"><a href="#popup">Click Me</a></div>
<div id="popup">
    <div class="window">
        <a href="#" class="close-button" title="Close">X</a>
        <h1>Jendela Pop Up</h1>
        <p>Ini adalah jendela Pop Up sederhana tanpa javasript<br/>
        Jendela ini dimunculkan oleh CSS<br/>
        Untuk menutup jendela ini, klik tombol close di kanan atas</p>
    </div>
</div>
<style>

Code CSS ( Letakan diatas kode ]]></b:skin> )

#button {
margin: 5% auto;
width: 100px;
text-align: center;
}
#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}
#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}
.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}
#popup:target {
visibility: visible;
}
Jika sudah diterapkan silahkan di Save, dan jika ingin di edit/ubah agar sesuai dengan Template anda, silahkan anda edit/ubah sendiri code CSS dan HTMLnya.
baik, sekian dari saya semoga artikel ini bisa bermanfaat untuk anda.

Terimakasih yang sudah membaca dan menerapkan cara ini di Template Blog anda.
Wabillahitaufik Walhidayah Wassalamualaikum.

Code Source : TWD

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

7 komentar

oohh...,langsung praktek

comment back > http://akisada-ryo.blogspot.com/

Manteb Nih, Cocok Buat Login Page :D
Thanks

edho-tech.blogspot.com

wew cuma pake CSS bisa, CSS is everything :3

keren, makasih yah udah share
- salam damai -
Daeng Rio

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.
EmoticonEmoticon