Membuat Modal Bootstrap

Publish Date : 09-04-2016 , dibaca 7252 kali, Hari ini dibaca : 1 kali ,0 comments

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..

cara membuat modal pop up bootstrap

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">&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. 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

Produk Rekomendasi

Artikel Terkait

Diskusi



wa