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.

11 Januari 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat