Memahami dialog atau modal Bootstrap

Setelah kita berhasil membuat dialog atau modal menggunakan Bootstrap seperti yang dibahas di http://www.proweb.co.id/articles/web_application/modal_bootstrap.html, kita akan memahami hal-hal terkait dialog atau modal pada Bootstrap.

Beberapa hal yang kita pelajari dari tampilan utama dialog pada Bootstrap adalah

1. Container menggunakan class ‘modal‘ , diikuti ‘modal-dialog‘ , dan ‘modal-content‘ misalnya:
   <!– Modal –>
   <div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
     <div class=”modal-dialog” role=”document”>
       <div class=”modal-content”>
     
    
2. Untuk header menggunakan class ‘modal-header‘
         <div class=”modal-header”>
           <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span></button>
           <h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>
         </div>
3. Untuk body menggunakan class ‘modal-body’ misalnya:
   <div class=”modal-body”>
           Ini isi dialognya
   </div>
     
4. Footer menggunakan class ‘modal-footer‘ seperti contoh berikut ini:
         <div class=”modal-footer”>
           <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
           <button type=”button” class=”btn btn-primary”>Save changes</button>
         </div>
    
5. Bagian akhir
       </div><!– /.modal-content –>
     </div><!– /.modal-dialog –>
   </div><!– /.modal –>
   <!– Modal –>

Untuk memanggil dialog kita dapat

1. Menggunakan button dengan pola seperti contoh berikut ini:
   <!– Button trigger modal –>
   <button type=”button” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal”>
     Launch demo modal
   </button>
    
2. Menggunakan Javascript misalnya
   $(‘#myModal’).modal(‘show’);

Artikel berikutnya adalah http://www.proweb.co.id/articles/web_application/dialog_js.html .

Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/javascript/#modals .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.