Dialog atau modal pada Bootstrap

Dalam membuat aplikasi berbasis web kita mungkin akan menjumpai suatu tampilan di mana pemakai aplikasi harus memilih banyak sekali data. Kita dapat menggunakan dialog atau modal sebagai antar muka atau user interface bagi pemakai aplikasi untuk memilih salah satu data dari sekian ribu data. Kita dapat mengimplementasikan dialog atau yang juga dikenal modal. Kita akan membuat dialog ini pada Bootstrap.

Dari informasi yang ada di http://getbootstrap.com/javascript/#live-demo kita dapat membuat program yang mudah seperti contoh berikut ini:
  <!– Button trigger modal –>
<button type=”button” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal”>
  Jalankan Dialog/Modal
</button>

<!– Modal –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
  <div class=”modal-dialog” role=”document”>
    <div class=”modal-content”>
      <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”>Judul Dialog</h4>
      </div>
      <div class=”modal-body”>
        Ini isi Dialog
      </div>
      <div class=”modal-footer”>
        <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Tutup</button>
        <button type=”button” class=”btn btn-primary”>Simpan</button>
      </div>
    </div>
  </div>
</div>

Hasilnya dapat dilihat pada http://aris.proweb.asia/dist/coba30.html dengan tampilan seperti gambar berikut ini

Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/javascript/#live-demo .

Artikel selanjutnya adalah http://www.proweb.co.id/articles/web_application/dialog_bootstrap.html .

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