PHP :: Membuat Modal Bootstrap PHP

Bootstrap kita ketahui adalah sebuah framework CSS yang sangat familiar dan super, sangat membantu kita dalam membangunn aplikasi maupun website bisa dibaca pada artikel berikut Mengenal lebih jauh twitter bootstrap. Seperti fungsi sebagai framework berarti kita dipermudah dengan fitur-fitur yang telah disediakan didalamnya. Salah satu fitur keren dari bootstrap adalah modal

Mari kita buat contoh penggunaan pada skrip html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!-- Tombol Untuk menampilkan modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">   Buka Modal </button>   <!-- Dialog Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">   <div class="modal-dialog">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>         <h4 class="modal-title" id="myModalLabel">Modal Judul</h4>       </div>       <div class="modal-body">         ... isi modal bisa table bisa text biasa ....       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>       </div>     </div>   </div> </div>

Contoh skrip diatas sudah bisa menjalankan sebuah modal, dan jangan lupa tentunya untuk include core bootstrap dan jquery nya. 

1. Pada skrip diatas pada button terdapat
   ?

   1	data-toggle="modal" data-target="#myModal"

   data-toggle berfungsi untuk menjalankan perintah bahwa yang dibuka nanti adalah jenis modal yang sudah ditanam pada core bootstrap. Kemudian data-target berfungsi sebagai penanda sebuah id yang akan di kirim ke dialog modal, jadi kita bisa buat beberapa tombol dengan target yang berbeda.
2. Pada skrip dialog modalnya
   ?

   1	class="modal fade" id="myModal"

   class=modal fade berfungsi sebagai style css dan effect tampilan yang dibawa dari core bootstrap bisa diganti sesuai selera.  id=myModal sebagai identitas yang diterima dari button.
3. Skrip close
   ?

   1	data-dismiss="modal"

   berfungsi untuk menutup modal

Fungsi options yang terdapat pada modal bootstrap

Name	type	default	description
backdrop	boolean or the string'static'	true	klik diluar modal untuk close modal
keyboard	boolean	true	close modal dengan tombol esc
show	boolean	true	Shows the modal when initialized.
remote	path	false

Saya akan membahas tentang penggunaannya pada CRUD php pada artikel selanjutnya, terimakasih semoga bermanfaat. - See more at: http://fabernainggolan.net/membuat-modal-bootstrap-php#sthash.aWf4acqB.dpuf

Tweet