Menampilkan Modal dengan Bootstrap

21 May 2017 | Tags: , ,


Modal merupakan kotak dialog atau pop up yang digunakan untuk memberikan informasi penting atau konfirmasi kepada pengguna sebelum melakukan tindakan selanjutnya. Biasanya kita akan mendapatkan konfirmasi ketika akan menghapus data. Sebelum mau menghapus biasanya kita akan dikonfirmasi apakah benar mau menghapusnya. Modal juga bisa digunakan untuk menampilkan form inputasi, dan yang banyak digunakan juga adalah untuk menampikan foto gallery. Pada materi ini kita akan membahas cara menampilkan modal dengan Bootstrap.

Menampilkan Modal dengan Bootstrap

Sebagaimana kita ketahui Bootstrap adalah framework css yang sangat popular dan banyak digunakan untuk membangun front end. Sebagai pengembang kita dimanjakan dengan fasilitas dan plugin yang sangat lebih dari cukup. Begitu pula halnya dengan menampilkan modal, kita akan dengan mudah membuatnya dengan Bootstrap.

Konten atau informasi yang disajikan dalam Modal bisa berasal dari:

  1. Internal, dalam satu file, biasanya ditaruh pada bagian tertentu halaman web.
  2. External, memanggil dari luar file atau bahkan dari URL tertentu.

Ada tiga bagian penting untuk memanggil Modal pada Bootstrap yaitu:

  1. Bagian Trigger
    Bagian Trigger merupakan awal pemanggilan modal yang bisa anda sertakan pada button (tombol) atau bisa dari link. Atribut dari pemanggilan modal terdiri dari

    • data-toggle="modal": membuka Modal
    • data-target="#target": merupakan elemen DIV dengan ID tertentu yang akan dipanggil
    • href=”file_luar.html”: jika kita akan menampilkan file external maka atribut ini diisi dengan sumber atau URL yang nantinya akan ditampilkan dalam URL.
  2. Bagian Modal
    Bagian Modal merupakan elemen yang akan dipanggil pada modal.  Yang perlu diperhatikan adalah nilai dari data-target pada bagian Trigger harus sama dengan id dari elemen yang div yang akan. dipanggil
    <div class=”modal fade” id=”target” role=”dialog”>
    <div class=”modal-dialog”>
  3. Bagian Modal Content
    Bagian Model Content merupakan elemen div  yang terstruktur, dimana nantinya akan muncul pada modal. Adapun strukturnya adalah seperti berikut:
    <div class=”modal-content”>
    <div class=”modal-header”>
    </div>
    <div class=”modal-body”>
    </div>
    <div class=”modal-footer”>
    </div>
    </div>

Berikut ini contoh script html untuk menampilkan modal dengan Bootstrap:

<!-----------------------------------------------------------------------
 * Contoh Menampilkan Modal dengan Boostrap
 * by: Komang.My.ID
 * Denpasar, 21 Mei 2017
 * Menampilkan Modal dengan Boostrap
 * http://www.komang.my.id
 * info@komang.my.id
 ----------------------------------------------------------------------->
<html>
<head>
<title>Memanggil Modal Bootstral</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<h2>Contoh Memanggil Modal dengan Bootstrap</h2>
		<h3>Modal Link Internal</h3>
		<p>Memanggil modal internal</p>
		  <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Buka Modal</a>
		<h3>Modal Link External</h3>
		<p>Memanggil modal dari file/url lain</p>
		<a href="file_ext1.html" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal2">File 1</a>
  <a href="file_ext2.html" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal2">File 2</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Konfirmasi</h4>
        </div>
        <div class="modal-body">
          <p>Anda yakin mau menghapus data ini?</p>
        </div>
        <div class="modal-footer">
       	  <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-floppy-disk"></span> Simpan</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
  <div class="modal fade" id="myModal2" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
      </div>
      
    </div>
  </div>
  		
	<hr>
      <p>Contoh <a href="http://www.komang.my.id"> Pemanggilan Modal dengan Bootstrap</a>, by:Komang.My.ID</p>
</div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script language="javascript">
		$('body').on('hidden.bs.modal', '.modal', function () {
		    $(this).removeData('bs.modal');
		});
	</script>
</body>
</html>

Download File menampilkan Modal dengan Boostrap

Share via Facebook / Twitter / Google + untuk Download



Komentar via Facebook tentang Menampilkan Modal dengan Bootstrap

Komentar tentang Menampilkan Modal dengan Bootstrap

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *