Cara Mudah Membuat Modal Box Dengan CSS

Cara Mudah Membuat Modal Box Dengan CSS - Modal box merupakan kotak dialog yang ditampilkan pada halaman website. Modal digunakan untuk memberikan sebuah informasi atau konfirmasi sebuah tindakan atau eksekusi yang dilakukan oleh user. Bagaimana cara membuat sebuah modal box?. Modal box biasanya dibuat dengan menggunakan bahasa pemograman jquery. Namun sekarang saya akan mencoba membuat modal box dengan menggunakan CSS. Bagaimana caranya.. Silakan ikuti tutorial cara mudah membuat modal box dengan css.

Membuat Modal Box

1. Buatlah file modal.html dan ketikan kode html seperti berikut :

Dari kode diatas dapat kita lihat terdapat link dengan href=#mymodal, maksudnya ketika link tersebut diklik maka div dengan id=mymodal akan ditampilkan.

2. Buatlah kode CSS seperti gambar dibawah ini :

Perhatiakan kode css proses hide dan show diatas. Pada saat halaman di load maka class modal akan disembunyikan dengan cara memberikan nilai top:-200px. class modal:target merupakan fungsi ketika modal dipanggil maka class modal akan ditampilkan dengan mengatur nila top:0. Kemudian simpan file htmlnya kemudian jalankan pada browser. Untuk melihat modal box silakan klik tombol klik info. maka akan muncul modal box seperti berikut.