Ok.. Pada postingan kali ini kita akan membuat Pop up window dengan CSS,dalam pembuatan pop up ini tidak menggunakan plugin jquery maupun javascript,, disini hanya menggunakan CSS dan HTML. Untuk Melihat hasilnya anda bisa lihat di link demo di bawah ini :

Demo Download

Oy. Yang belum baca artikel sebelumnya silahkan dibaca ya :

Membuat Gambar Responsive dengan CSS

Lanjut dalam pembahasan membuat Pop up window dengan CSS, Langsung aja kali ya di tampilin script nya:

HTML CODE :

<a href="#open-modal">Open Modal</a>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#modal-close" title="Close" class="modal-close">close ×</a>
    <h1>CSS Modal</h1>
    <div>Simple CSS Modal Window <br/>Suckittrees.com</div>
  </div>
</div>

CSS CODE :

<style>
.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
 
.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}
 
.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
}
 
.modal-window header {
  font-weight: bold;
}
 
.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}
 
.modal-close:hover {
  color: #000;
}
 
.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}
</style>

 OK.. Silahkan simpan dengan extensi .html , dan Jalankan di browser, Untuk Demo dan Download Membuat Window Pop Up dengan CSS bisa anda lihat dibawah ini

Demo Download