Menampilkan Pop Up Modal dengan Bootstrap

Beberapa hari lalu penulis sempat menuliskan mengenai popup modal yang fungsinya untuk Meghilangkan Backdrop Modal Saat Close Modal dan Disable atau Menonaktifkan Backdrop Modal Bootstrap. Tapi penulis belum menuliskan cara membuat pop up modal menggunakankan bootstrap tersebut. Kali ini kita akan coba membuatnya, bagaimana kita menampilkan modal pop up menggunakan bootstrap. Caranya sangat mudah, yang kita butuhkan adalah Bootstrap yang dapat didownload di alamat https://getbootstrap.com/. Buka kemudian pilih tombol download. Setelah terbuka, download pada bagian Compiled CSS and JS.

Setelah download, kita extract hasil yang kita dapatkan tadi. Kita hanya memerlukan 3 file yakni :

jquery.min.js yang dapat kita download di sini atau kita gunakan script tersebut pada file coding nantinya.
bootstrap.min.css yang sudah kita download pada bootstrap tadi dan terletak pada folder css.
bootstrap.min.js yang terletak pada folder js.

Ok, persiapan sudah selesai. Sekarang kita langsung saja membat halaman index.php yang isinya adalah untuk menampilkan halaman tombol, dimana ketika tombol di klik, maka modal akan muncul. Pertama, kita akan membuat script header, yang berfungsi untuk memuat 3 file di atas. Berikut adalah scriptnya :

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Source dari file di atas, Saya ambil dari alamat yang berada pada tempat lain (bukan server sendiri). Namun apabila Anda sudah download dan akan mengambil file dari server milik Anda, Anda dapat menyesuaikan letak source nya. Setelah selesai, sekarang kita akan menuliskan scrpt di bawahnya lagi yang berfungsi untuk menampilkan tombol untuk menampilkan modal pop up.

<button type="button" name="add" id="add" data-toggle="modal" data-target="#dataModal" class="btn btn-warning">Add</button>

Pada script di atas, terdapat #dataModal di mana merupakan nama ID untuk memanggil modal UI yang yang dibuat pada bagian bawah. Setelah selesai, kemudian Kita akan membuat UI modal bootstrap. Berikut adalah scriptnya :

<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Contoh Modal</h4>  
                </div>  
                <div class="modal-body">  
                    Isi modal
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

Pada script di atas, terdapat penamaan ID dataModal yang artinya, script tersebutlah yang akan dipanggil oleh button sebelumnya. Selain itu, beberapa fungsi dan class code bootstrap di atas diantaranya :

modal-header : Merupakan area untuk penamaan title modal.
modal-body : Merupakan area untuk isi dari modal pop up yang dibuat
modal-footer : Merupakan area bawah modal pop up yang biasanya tombol berada pada area tersebut.
data-dismiss : Merupakan fungsi untuk menutup modal pop up tersebut.

Namun secara keseluruhan, apabila script di atas digabungkan, makan akan seperti di bawah ini.

<html>  
      <head>  
           <title>Tutorial Bootstrap modal</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Coba tampilkan modal</h3>  
                <br />  
                <div class="table-responsive">  
                     <div align="right">  
                          <button type="button" name="add" id="add" data-toggle="modal" data-target="#dataModal" class="btn btn-warning">Add</button>  
                     </div>  
 
                </div>  
           </div>  
      </body>  
 </html>  
 <div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Contoh Modal</h4>  
                </div>  
                <div class="modal-body">  
                    Isi modal
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

Nah mudah bukan? sekarang Anda mencoba untuk membuat modal pop up sesuai kreasi Anda. Selamat mencoba dan semoga sukses 🙂