Pure css modal dialog tanpa javascript

1. Pure CSS Modal Dialog Tanpa Javascript
Pure CSS Modal Dialog Tanpa Javascript - Banyak
cara untuk menampilkan efek dialog modal mulai dari
penerapan CSS murni ,plugin jquery ui modal maupun
menggunakan javascript. Nah pada postingan tutorial
blogger kali ini saya akan memberikan sedikit contoh
membuat efek dialog modal tanpa menggunakan
Javascript. Ini sekaligus melengkapi artikel terkait efek
dialog modal sebelumnya :
Random Post Efek Modal Jquery UI
Simple Flat UI Menu Modal Dialog
Flat UI Button Awesome Modal Dialog
Namun untuk efek modal kali ini kita hanya akan
memanfaatkan pseudo selector (:target) sebagai
pembentuk efek yang akan kita tampilkan nantinya.
Untuk demonya kurang lebih seperti ini :
DEMO
Sedangkan element pembentuknya adalah sebagai
berikut :
CSS
.wrap {
padding: 40px;
text-align: center;

2. }
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #e06666;
border: #e06666 solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;

3. text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #555;
border: #555 solid 1px;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;

4. }
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);

5. top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;

6. }
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
text-align: right;
}
HTML
<div class="wrap">
<h1>Pure CSS Modal Dialog Tanpa Javascript</h1>
<p>Ini adalah contoh efek modal tanpa
Javascript dan hanya memakai pseudo selector
":target" untuk menampilkan efek light box</p>
<a href="#modal-one" class="btn btn-big">Contoh

7. Modal</a>
</div>
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Tampilan Modal Box</h2>
<a href="#" class="btn-close" aria-
hidden="true">x</a>
</div>
<div class="modal-body">
<p>Klik OK jika anda setuju atau klik tanda ( X )
untuk mengakhiri sesi ini</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">OK</a>
</div>
</div>
</div>
Untuk isi dialog tinggal mengubah pada content
"modal-body" sesuai selera anda