Bootstrap 3 Modal - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Modal

TrikSonic - Modal Bootstrap adalah kotak dialog seperti Box PopUp yang dapat digunakan untuk memberikan sebuah informasi kepada pengguna/user atau bisa juga digunakan untuk meminta user untuk melakukan tindakan yang diperlukan sebelum melanjutkan sebuah perintah.

Dengan Bootstrap keperluan membuat sebuah kotak dialog atau modal dapat dilakukan dengan mudah, fleksibel dan modern.

Berikut contoh dan tutorial yang bisa digunakan dalam pembuatan sebuah kotak dialog/modal.

Cara Membuat Modal Bootstrap

Untuk membuat modal dengan bootstrap silahkan pelajari contoh modal berikut :

Contoh :

<!-- tombol pemicu -->
<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tesModal">
  <div class="modal-dialog">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

Ukuran Modal

Secara default Bootstrap Modal memiliki nilai ukuran medium, tapi untuk keperluan lainnya bootstrap sudah menyediakan nama class untuk mengatur ukuran dari Modal tersebut.

Nama class yang bisa digunakan untuk mengatur modal adalah .modal-lg (ukuran besar) dan .modal-sm (ukuran kecil), dan dituliskan setelah class dasar .modal-dialog

Contoh Large Modal

<!-- tombol pemicu -->
<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tesModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

Contoh Small Modal

<!-- tombol pemicu -->
<button class="btn btn-default" data-toggle="modal" data-target="#tesModal">
  Buka Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tesModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
    <!-- header-->
      <div class="modal-header">
        <button class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
      </div>
      <!--body-->
      <div class="modal-body">
        Konten yang ingin ditampilkan disini
      </div>
      <!--footer-->
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

Efek Animasi Memudar dan Menghapusnya

Maksud dari animasi memudar adalah modal akan tampil dan hilang secara perlahan atau adanya jeda waktu

Efek animasi memudar ditentukan oleh nama class .fade pada class dasar .modal, contoh modal efek fade/memudar dapat dilihat pada contoh contoh sebelumnya

Jika tidak menginginkan efek fade pada modal cukup menghapus nama class .fade pada class dasar .modal

Contoh menggunakan efek Fade

<div class="modal fade" id="tesModal">
...
</div>

---

Contoh Tanpa efek Fade

<div class="modal" id="tesModal">
...
</div>