Belajar Bootstrap Part 15 (Membuat Modal dengan Bootstrap)

ASSALAMU'ALAIKUM Wr. Wb.

Membuat Modal Dengan Bootstrap

Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana atau konfirmasi untuk suatu aksi, misalnya sobat ingn mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal

Bootstrap memberikan plugin yang berfungsi untuk membuat modal, modal yang dihasilkan cukup bagus dan cara membuatnya pun mudah

Cara Membuat Modal Dengan Bootstrap

Akan saya jelaskan tentang pembuatan modal Bootstrap

data-target="#myModal"

Pada tombol, isi dari atribut tersebut menentukan id modal yang akan dimunculkan ketika tombol "Buka Modal" diklik . Perhatikan contoh Diatas.

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- konten modal-->
      <div class="modal-content">
        <!-- heading modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Bagian heading modal</h4>
        </div>
        <!-- body modal -->
        <div class="modal-body">
          <p>Bagian Body Modal</p>
        </div>
        <!-- footer modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
        </div>
      </div>
    </div>
  </div>

class "fade" berfungsi untuk memberi efek memudar ketika modal terbuka dan menutup

data-dismiss="modal" 

atribut data-dismis seperti diatas memiliki fungsi untuk menutup modal. Kemduian modal memiliki bagian kepala atau heading, body dan footer

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- konten modal-->
      <div class="modal-content">
        <!-- heading modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Bagian heading modal</h4>
        </div>
        <!-- body modal -->
        <div class="modal-body">
          <p>Bagian Body Modal</p>
        </div>
        <!-- footer modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
        </div>

Sobat bisa ganti isi dari heading body dan footer modal sesuai keninginan sobat. Dan jika ingin memperkecil ukuran modal sobat dapat menambahkan class "modal-sm" dan untuk memperbesar modal tambahkan class "modal-lg"

Kesimpulan
Bootstrap menyediakan fasilitas modal yang responsive dan mudah untuk digunakan. Kita tidak perlu susah payah membuat plugin modal tinggal memanggil classnya saja kita dapat membuat modal tersebut dan yang dihasilkan pun memuaskan

Sekian dari saya apabila ada kesalahan mohon di maafkan.TerimaKasih

WASSALAM