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.
X
Jendela ini dimunculkan oleh CSS
Untuk menutup jendela ini, klik tombol close di kanan atas
Jendela Pop Up
Ini adalah jendela Pop Up sederhana tanpa javasriptJendela ini dimunculkan oleh CSS
Untuk menutup jendela ini, klik tombol close di kanan atas
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 {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.
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;
}
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
Tidak ada komentar:
Posting Komentar