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 :

.wrap {
  padding: 40px;
  text-align: center;
}
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;
  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;
}
.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);
  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;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  text-align: right;
}

<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 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