| 24 Agustus 2015 | 0 Comments |

Cara Membuat Modal (Pop-Up) Menggunakan Bootstrap

Tags: , , ,

Category: Bootstrap, Tutorial

Tulisan ini diilhami oleh sebuah pengalaman saat saya membuat halaman dasbor (admin area) dari sebuah aplikasi berupa web untuk portal download, yaitu di download.banghaji.com. Kejadian menarik yang seharusnya tidak perlu saya alami 😀

Pada aplikasi tersebut saya membuat inputan dan edit data menggunakan pop-up atau modal menggunakan bootstrap, namun modal yang diharapkan tampil tidak juga kunjung menampakkan diri alias tidak terjadi apa ketika tombol diklik. Sudah coba diutak-atik dan diperiksa beberapa kali kode HTML yang digunakan untuk membentuk modal ini tapi tetap tidak berfungsi.

Setelah puyeng beberapa waktu, muncul pikiran aneh untuk menukar posisi pemanggilan javascript dari jQuery dan bootstrap, dan akhirnya modal pun muncul dengan cantiknya 😉 …

Kesimpulannya adalah, panggil jQuery dulu baru memanggil Bootstrap…

Oke, sebagai contoh dari pembuatan modal menggunakan bootstrap ini, berikut saya berikan contohnya, silahkan disimpan dengan nama apa saja, format html atau php juga bisa:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>Menampilkan Modal Bootstrap | AmazingLight</title>

   <link href="inc/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<center>
   <h1>Menampilkan Modal Bootstrap!</h1>
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Tampilkan!</button>
</center>	

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Judul modal</h4>
         </div>

         <div class="modal-body">
            Isi dari modal yang akan ditampilkan, letakkan di sini...
         </div>

         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
            <button type="button" class="btn btn-primary">Aksi</button>
         </div>
      </div>
   </div>
</div>

<script src="inc/js/jquery.min.js"></script>
<script src="inc/js/bootstrap.min.js"></script>
</body>
</html>

Adapun tampilan dari kode tersebut setelah dijalankan adalah seperti gambar berikut:




Yang penting untuk diperhatikan bahwa modal dan tampilan seperti gambar baru akan sama jika Anda sudah mendownload dan mengekstrak file-file bootstrap… Dan ingat pula, panggil javascript untuk jQuery lebih dahulu baru kemudian Bootstrap (lihat baris 40 dan 41).

Oke, demikian sekilas info tentang cara membuat modal (pop-up) menggunakan bootstrap, sampai jumpa…



Leave a Reply