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.

Hasil Ahir Tampilan Awal Tryit Editor

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>

Hasil Tryit Editor

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>

Hasil Tryit Editor

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

Hasil Tryit Editor

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

Hasil Tryit Editor

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>

Hasil Tryit Editor

Sampai saat ini, kita sudah belajar membuat Modal Box Pure CSS tanpa JavaScritp. Silahkan dipelajari baik-baik untuk lebih memahaminya. Kita bisa menambahkan beberapa modal, contoh kita akan menambahkan Modal-2

Membuat Modal ke-2

Untuk menambah modal ke-2, ke-3 dst, copy kode yang sudah ada. Ganti for="modal-1" menjadi for="modal-2" dst. Jangan lupa edit judul dan isinya.

Modal 2 Modal 2 Tryit Editor

Apabila ada masukan atau pertanyaan silahkan di kolom komentar.