Bootstrap merupakan salah satu framework CSS yang paling populer dikalangan web developer. Selain dari kemampuanya, bootstrap juga menjadi pelopor dalam metode mobile first. Dimana pembuatan desain website, didahulukan dari tampilan mobile terlebih dahulu. Pertama kali saya menggunakan bootstrap itu dikala namanya masih twitter bootstrap. Saya kurang tau versi berapa, cuman bootstrap ini menjadi pengganti dari Ext2JS.

Komponen Bootstrap

Seperti framework css pada umumnya, bootstrap telah memiliki elemen yang sudah ada bawaan salah satunya Modal. Modal atau kalau dalam istilah pemrograman dekstopnya Pop-Up dialog, ini memang sangat banyak sekali manfaatnya. Mulai dari hanya pemberitahuan biasa, isian satu halaman, pemilihan satu halaman, dan masih banyak lagi.

Sekilas Tentang Event

Event atau kejadian merupakan hal yang lumrah ada divarian bahasa pemrograman Java DKK. Event tersebut biasanya adalah istilah lain ketika sesuatu telah terjadi. Misalkan dalam javascript, ketika di klik maka event yang dikenali secara bahasa pemrograman adalah onclick. Kemudian event ketika mouse ada diatas elemen tertentu, maka eventnya adalah onmousehover. Event ini bisa kita gunakan untuk menanam listener – atau istilah lumrahnya, menanam fungsi ketika – event itu dieksekusi.

Event Khusus

Event khusus atau event bentukan biasanya ada secara bawaan dari setiap framework CSS yang kita gunakan. Event ini tidak ada secara umum, hanya untuk framework-framework tertentu. Tentu saja hal ini hanya bisa didapatkan dari dokumentasi resmi masing-masing framework.

Event Modal Bootstrap

Pada umumnya hanya ada dua event dalam modal ini, salah satunya adalah event onshow dan onhide. Namun, karena event ini pasti akan saling timpa antara event yang sudah ada pada bawaan, maka event ini dialiaskan kembali menjadi event bentukan bawaan bootstrap.

Event Modal Bootstrap Show

Untuk menanam event show cukup gunakan kode seperti ini

$("#nama_id_modal").on("shown.bs.modal",function(e){
//lakukan fungsi ini
console.log('Modal tampil!');
});

Event Modal Bootstrap Hide

Untuk menanam event show cukup gunakan kode seperti ini untuk bootstrap versi 3.

$("#nama_id_modal").on("hidden.bs.modal",function(e){
//lakukan fungsi ini
console.log('Modal hidden!');
});

Sementara untuk bootstrap versi 2

$("#nama_id_modal").on("hidden",function(e){
//lakukan fungsi ini
console.log('Modal hidden!');
});

Demikian. Semoga membantu.