Cara Membuat Modal Box Dengan CSS

Kembali lagi di dumetschool.com masih di dalam tips dan trik CSS sekarang kita akan belajar cara membuat modal box. modal box itu apa ? modal box ini merupakan jendela alert yang dimana ketika kita ngelakuin sesuatu maka akan tampil jendela box berisi informasi yang ditampilkan. Dari pada bingung kita mulai mencobanya ada sebuah struktur HTML seperti berikut

diatas saya buat link dan sebuah kotak modal sebagai target yang kita tentukan. Kita masih menggunakan metode target yang sebelumnya kita sudah membuat accordion dengan teknik :target tanpa menggunakan javascript. Jika sudah kita berikan CSS sedikit agar lebih menarik tampilannya

jika ditampilkan akan seperti berikut

selanjutnya kita mau ketika di klik tombol modalnya backgroundnya menjadi transparan untuk itu kita gunakan :before contohnya sebagai berikut

kita akan munculkan backgroundnya kembali ketika link target sudah diklik sebagai berikut

lalu untuk modal boxnya kita akan hilangkan terlebih dahulu dengan metode translateY nilainya sebagai berikut

sekarang kita buat metode target yakni ketika modal ditargetkan maka akan tampil modal content misalnya

saya jelasin cara kerjanya seperti ini ketika kita klik tombol link modalnya maka teman teman lihat pada urlnya akan muncul nama targetnya. dan kita mau tampilkan modal box tersebut.

selamat mencoba.