Home

Bootstrap Dynamic Modal

Mari berdiskusi bersama kami di Group Facebook Kurung Kurawal

Kemaren menggunakan library bootstrap untuk mencoba menggantikan jQuery-UI, yaaa, karena permintaan client aja sih. Dengan jqUI , mudah sekali membuat dialog box, modal, dengan widget dialog nya. Bootstrap juga menyediakan widget modal, namun, sesuai dengan sifat bootstrap yang sebenarnya hanya bermain dengan markup html (js juga ada sih), widget bootstrap agak kesulitan untuk dibuat programmable.

Misalnya, untuk membuat dialog, diharuskan sudah memiliki markup html yang disediakan untuk kemudian dipanggil dari element lain, misalnya anchor. Hal ini sebenarnya membuat code jadi sangat rapi dan terkesan tersusun dengan baik.

Namun, karena sudah terbiasa dengan dynamic html programming, dengan jquery UI, Sencha Touch, yang mana kebanyakan object/widget html digenerate secara dynamic, agak ribet juga dengan bootstrap. Tapi, client berkata lain, selain karena harus terintegrasi dengan sistem yang sudah ada, “bootstrap lebih cakep mas”, kata beliau.

So, daripada pusing, lebih baik buat widget dynamic nya, agar bisa menampilkan alert, prompt, confirm, bahkan custom modal dengan bootstrap secara dinamis, generated by javascript.

Trus, kenapa tidak menggunakan bootbox saja? Jawabnya sederhana, setelah hampir 30 menit membuat ini, baru dikasih tau, “pake bootbox aja mas”, alamak. Tapi kayaknya, bootbox belum memiliki fitur show modal untuk element html, entahlah.

Berikut jsfiddle-nya, semoga berguna untuk kita semua. Sourcecode nya boleh dipake oleh semua orang, silakan saja.