Modal adalah suatu kotak dialog yang muncul pada saat kita mengklik suatu tombol, pasti teman-teman pernah melihatnya di suatu website dimana pada saat teman-teman klik suatu tombol akan muncul kotak dialog yang berisi elemen html. Class modal adalah class yang disediakan oleh bulma untuk membuat suatu kotak dialog yang dimana kita bisa menggunakannya untuk menaruh konten-konten seperti konten form pendaftaran atau form login dan lain-lain. Pada artikel kali ini saya akan membahas bagaimana Cara Membuat Modal pada Bulma Framework.

Ok, langsung saja saya akan memberikan langkah-langkah bagaiman Cara Membuat Modal pada Bulma Framework:

1. Pertama

anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

Cara Membuat Modal pada Bulma Framework

2. Kedua

anda ketikan kode html di bawah ini:

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Cara Membuat Modal pada Bulma Framework

3. Ketiga

Kita akan membuat kotak dialognya menggunakan class modal, berikut kodenya

Kotak dialog atau modal di simpan diketikan di bawah tombol dan akan tampil apabila kita sudah menambahkan kode javascript.

4. Keempat

Karena di bulma belum tersedia javascript yang menjalankan modal tersebut, maka kita akan membuatnya, bikin lembar kerja baru dan masukan kode javascript berikut ini:

Setelah selesai mengetikan kodenya maka teman-teman save kode javascriptnya di folder _javascript yang terdapat dalam folder docs.

Cara Membuat Modal pada Bulma Framework

Lalu kita panggil modal.js dengan menggunakan kode di bawah ini:

jangan lupa kita simpan scriptnya di paling bawah bersama file js yang lainnya.

Buka browser teman-teman lalu refresh file html yang telah kita buat tadi dan klik tombolnya maka kotak dialog/modal itu akan muncul

Cara Membuat Modal pada Bulma Framework

Class modal adalah class yang memudahkan kita mebuat suatu kotak dialog atau kotak yang berisi elemen-elemen html yang kita inginkan.

Dengan bulma kita dapat dengan mudah membuat kotak dialog/modal tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat kotak dialog/modal menggunakan class modal pada bulma.

Sekian pembahasan kali ini tentang Cara Membuat Modal pada Bulma Framework. Semoga bermanfaat.