Jendela Pop Up Dengan CSS

Banyak orang yang bertanya-tanya mengenai Popup pada blog, disini kita akan memberi tutorial Cara Membuat Jendela Pop Up Dengan CSS. Apa itu jendela pop-up? jendela yang apabila kita klik tombolnya, maka akan muncul jendela dengan ukuran yang ditentukan ditengah-tengah halaman.
Contohnya seperti ini:

Klik disini

X

Jendela Pop Up

Ini adalah jendela Pop Up sederhana tanpa javasript
Jendela ini dimunculkan oleh CSS
Untuk menutup jendela ini, klik tombol close di kanan atas

Berikut ini adalah kode HTML dan CSS nya untuk membuat jendela pop-up pada blog

Kode HTML:

<div id="button"><a href="#popup">Klik disini</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>

Kode CSS:

<style>
#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: auto;
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;
}
</style>

Kode HTML diletakan di bawah kode <body> atau diatas kode </body>
Kode CSS diletakan diatas kode ]]></b:skin>

Kode dari: www.tutorial-webdesign.com

CSS, Tutorial Blogger