Contoh Penggunaan Modal Pada Twitter Bootstrap

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Modal atau sebuah jendela munculan jika suatu button atau link di klik (saya menyebutnya dengan istilah popup) banyak digunakan dalam membangun aplikasi berbasis website. Hal ini bertujuan untuk menghemat halaman website serta berbagai macam alasan lain. Pada perapannya biasanya Sebuah Modal (popup) semacam ini digandeng dengan bahasa pemrograman disisi client yaitu javascript.

Penggunaan Modal Pada Twitter Bootstrap

Saat ini sudah banyak dikembangkan oleh developer website tentang teknik penggunaan modal ini sehingga kita tidak perlu repot untuk membuat dari awal sebut saja contohnya Bootstrap. Bisa dikatakan hampir semua yang kita butuhkan sudah disediakan oleh bootstrap sehingga kita hanya perlu fokus pada logika dan proses-proses yang berkaitan dengan database.

1. Sebelum kita mulai, saya asumsikan anda sudah paham bagaimana menggunakan bootstrap ini.

2. Selanjutnya kita perlu menambahkan JQuery agar Modal dapat berjalan dengan Baik. Dalam hal ini saya menggunakan JQuery versi 1.8.3

3. Langkah terakhir adalah membuat sebuah tampilan sederhana untuk tampilan halaman website kita yang akan memanggil jendela modal bootstrap. saya menggunakan script sederhana berikut.
<!DOCTYPE HTML>
<html lang="en">
 <head>
 <title>Contoh Penggunaan Dialog Pada Bootstrap</title>
 <!--Sisipkan Bootstrap serta JQuery yang diperlukan-->
 <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/> 
 <script src="js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
 </head>
 
 <body>
 <center>
 <div style="margin-top:100px">
 <!--Link Yang akan memanggil Popup/Modal--> 
 <a href="#" data-toggle="modal" data-target="#contact" class="btn btn-lg btn-primary">Contact</a> 
 </div>
 </center>
 </body>
 <!--Sisipkan File (Isi Modal) yang ada di Folder include-->
    <?php include "include/dialog.php";?>

</html>
4. Kemudian Adapun Script yang saya gunakan pada contoh File Modal diatas dapat anda lihat pada contoh berikut
<!-- Modal Dialog Contact -->
<div class="modal fade" id="contact" 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">Contact Us</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
Download Contoh Source code lengkapnya disini.
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.