Membuat Modal Bootstrap

Heylo..Heyloo 😀

Kali ini aku mau share sedikit nih tentang cara membuat dialog box, apakah kalian tahu apa itu dialog box ? dan seperti apa sih..?? penasaran..?? yuk cuzz kesini.

Nah…dialog box nya itu mau di implementasikan di SiS+ nih temen. sebelumnya kan saat create ticket langsung lari ke halaman baru seperti ini, pasti kalian yang pernah buat tiket juga pernah lihat :

Dan menurut aku sih keliatannya juga nanggung ya, cuma ada tulisan dikit doang dan itu 1 halaman 😀 dan menurut kaka Ary aku suruh mencari tentang Modal Bootstrap, haduhh..apa itu ya, kalian bisa baca2 juga nih tentang Modal Bootstrap dan bisa dicoba2 juga karena langsung ada demonya itu. Kita menggunakan modal bootstrap ini karena menggunakan framework YII, ya..aksesoris2 YII nya ini sudah tersedia di Bootstrap tergantung versi berapa yang kita pakai. Apa itu Bootstrap bisa dilihat disini.

Denagn menggunakan Modal ini kita tidap perlu membuat 1 file View untuk di tampilkan pada sebuah halaman, kalau hanya untuk meminta respon si pengguna dengan cepat lebih baik gunakan Modal (dialog box).

Nah..mulai deh experiment’a pembuatan Modal ini, langkah2 nya yaitu :

1. Tombol Create Ticket

Sebelumnya aku buat tempat baru (layout) untuk testing perihal ini, nah..posisi tombolnya (button) di samakan dengan yang sebelumnya di bawah foto mahasiswa, seperti ini :

Kemudian sisipkan script modalnya.

2. Modal

Script Modal disisipkan pada layout sesuai dengan posisi button yang di inginkan, jadi script Modal ini 1 paket dengan script button nya, kurang lebih scriptnya seperti ini :

<!– Button to trigger modal –><a href=”#PesanTiket–>target(link) role=”button” class=”btn btn-primary” data-toggle=”modal”>
Create Ticket Konsultasi –> Tulisan di button</a>

<!– Modal –>
<div id=”PesanTiket” class=”modal hide fade” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”><div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button>
<h3 id=”myModalLabel”>Pesan Tiket konsultasi –> header Modal(dialog box)</h3>
</div><div class=”modal-body”>
<p>Apakah anda ingin buat tiket!. jika Ya silakan klik <b>Next</b>.</p>  –> isi Modal(dialog box)
</div>
 

<div class=”modal-footer”>
<button class=“btn btn-primary” aria-hidden=“true”>Next</button>–> footer Modal(dialog box)
</div>
</div>

dan untuk hasilnya seperti ini, tara…!!!! Lebih ciamiikk… 😀