contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Modal Bootstrap

Posted in Tutorial Bootstrap Life at 09 April 2016 With 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

▼ Download Source Code Dibawah Ini ▼


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

Artikel Terkait

Diskusi