Step by Step Membuat Modal Box Pure CSS tanpa JavaScript

Pada postingan kali ini kita akan Belajar Step by Step Membuat Modal Box Pure CSS tanpa JavaScript. Untuk modal latihan saya mempunyai layout web seperti pada tombol Tampilan Awal. Silahkan lihat Source yang akan kita modifikasi di Tryit Editor. Saya sertakan juga Hasil Akhir yang akan kita pelajari.

Menambahkan Background sekaligus Modal

Silahkan tambahkan CSS ini pada CSS yang sudah ada

/* Modal */
.modal {
  opacity: 1;
  visibility: visible;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .4);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(5px);
  transition: opacity .25s ease;
}

Tambahkan juga Kode HTML ini (untuk penempatan silahkan lihat Source)

<div class="modal">
</div>

Menambahkan Modal Body

Tambahkan lagi CSS ini, untuk body Modal dan tanda X

.modalInner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 40%;
}

.modalClose {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modalClose:after,
.modalClose:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modalClose:hover:after,
.modalClose:hover:before {
  background: #aaa;
}

.modalClose:before {
  transform: rotate(-45deg);
}

Saya tambahkan juga Media Queries, untuk Halaman Responsive. Silahkan sesuaikan dengan kebutuhan

/* Reponsive */
@media screen and (max-width: 768px) {	
  .modalInner {
    width: 80%;
    height: 80%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 480px) {
  .modalClose{
    top: 0.8em;
    right: 0.5em;
  }	
  .modalClose:after,
  .modalClose:before {
    height: 1em;
  }
}
@media screen and (max-width: 320px) {	
  .modalInner {
    width: 85%;
    height: 90%;
    box-sizing: border-box;
  }
}

Sekarang tambahkan kode HTML pada kode yang telah kita buat sebelumnya

<div class="modal">
<div class="modalInner">
    <label class="modalClose"></label>
    <h2>judul_modal</h2>
    <p>isi_modal_disini</p>
  </div>
</div>

Sembunyikan Modal

Pada .modal ubah, opacity dan visibilty

.modal {
  opacity: 0;
  visibility: hidden;
  ......

Munculkan Modal saat Klik Button

Buat dulu CSS untuk input Label

.modalState {
  display: none;
}

.modalState:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modalState:checked + .modal .modalInner {
  top: 0;
}

Simpan Kode ini diatas <div class="modal">

<input class="modalState" id="modal-1" type="checkbox" />

Perhatikan Kode HTML pada Button Selamat Idul Fitri, asalnya seperti ini

<label class="btn">Selamat Idul Fitri</label>

Tambahkan for="modal-1" menjadi

<label class="btn" for="modal-1">Selamat Idul Fitri</label>

Sampai sini, Button sudah bisa di Klik dan Modal sudah bisa muncul. Namun belum bisa di Close

Menutup Modal dengan tanda X

perhatikan kode ini

<label class="modalClose"></label>

Tambahkan for="modal-1" menjadi

<label class="modalClose" for="modal-1"></label>

Sampai sini, Modal sudah bisa di Close dengan klik X. Namun ketika klik background belum bisa menutup

Menutup Modal dengan klik Background

Kita buat dulu CSS untuk input Label Background

.modalBg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

Tambahkan kode ini di atas <div class="modalInner">

<label class="modalBg" for="modal-1"></label>