Membuat Modal Bootstrap
Pada Tutorial kedua kali ini, admin akan share Cara Membuat Modal di Bootstrap,,, Kalo yang belum tahu modal mungkin sedikit saya samakan dengan Pop Up, Belum paham juga...? .. Lihat gambarnya aja kali ya di bawah biar lebih ngerti..
Gimana Sudah mengerti buakan,, ...? masih belum ngerti juga.. ? serching deh di google... hahah...
Cara Membuat modal di Bootstrap
Untuk membuat modal pada aplikasi anda / website anda yang bisa digunakan sebagai pesan peringatan, atau informasi, juga bisa digunakan sebagai input data,,, wehh.. mantep kan ,, jadi seperti aplikasi desktop.. yoi.. canggih ne.. selain itu edit data php pada modal bootstrap juga bisa lo.. nanti kita masuk disana,,, sekarang kita akan belajar cara membuat modal dengan bootstrap terlebih dahulu
HTML Code :
<!-- 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">×</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. yang perlu diperhatikan adalah
data-toggle="modal" data-target="#myModal"
Itu digunakan sebagai pemanggilan target dengan menggunakan "id" yaitu "#" , so harus sama data-target="#myModal"
dengan id="myModal"
Gimana ,, Mudah Bukan,, So sekian dulu postingan kali ini tentang Cara Membuat modal dengan Bootstrap