BAB 11 – MODAL BOOTSTRAP
A. PENGERTIAN MODAL
Modal adalah komponen Bootstrap yang digunakan untuk menampilkan jendela popup di atas halaman utama tanpa berpindah halaman.
Modal biasanya digunakan untuk:
- Form Login
- Form Registrasi
- Detail Produk
- Konfirmasi Hapus
- Notifikasi
- Preview Data
- Upload File
Saat modal muncul, halaman utama akan menjadi lebih gelap (backdrop).
Contoh:
+----------------------------------+
| HALAMAN UTAMA |
| |
| [ Data Siswa ] |
| |
+----------------------------------+
↓ Klik Tambah
+--------------------------+
| Tambah Data Siswa |
|--------------------------|
| Nama : ____________ |
| Kelas: ____________ |
| |
| [Simpan] [Batal] |
+--------------------------+B. STRUKTUR DASAR MODAL
Bootstrap menyediakan struktur khusus:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
Header
Body
Footer
</div>
</div>
</div>Hierarki:
modal
└── modal-dialog
└── modal-content
├── modal-header
├── modal-body
└── modal-footerC. MEMBUAT MODAL PERTAMA
Tombol Pemanggil Modal
<button
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#modalSaya">
Buka Modal
</button>Penjelasan
| Atribut | Fungsi |
|---|---|
| data-bs-toggle=”modal” | Mengaktifkan modal |
| data-bs-target | Menentukan modal yang dipanggil |
Struktur Modal
<div class="modal fade"
id="modalSaya">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Judul Modal
</h5>
<button
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
Ini isi modal.
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
data-bs-dismiss="modal">
Tutup
</button>
</div>
</div>
</div>
</div>D. MEMAHAMI BAGIAN MODAL
1. Modal Header
Berisi:
- Judul
- Tombol Close
Contoh:
<div class="modal-header">
<h5 class="modal-title">
Data Siswa
</h5>
<button
class="btn-close">
</button>
</div>2. Modal Body
Berisi:
- Form
- Tabel
- Informasi
- Gambar
Contoh:
<div class="modal-body">
Selamat datang di Bootstrap 5.
</div>3. Modal Footer
Berisi tombol aksi.
Contoh:
<div class="modal-footer">
<button
class="btn btn-secondary">
Batal
</button>
<button
class="btn btn-success">
Simpan
</button>
</div>E. EFEK ANIMASI MODAL
Dengan Animasi Fade
<div class="modal fade">Modal muncul perlahan.
Tanpa Animasi
<div class="modal">Modal muncul langsung.
F. UKURAN MODAL
Bootstrap menyediakan beberapa ukuran.
Modal Kecil
<div class="modal-dialog modal-sm">Cocok untuk:
- Konfirmasi
- Notifikasi
Modal Normal
<div class="modal-dialog">Ukuran standar.
Modal Besar
<div class="modal-dialog modal-lg">Cocok untuk:
- Form panjang
- Detail produk
Modal Ekstra Besar
<div class="modal-dialog modal-xl">Cocok untuk:
- Tabel data
- Dashboard mini
G. MODAL FULLSCREEN
Bootstrap 5 mendukung fullscreen.
<div class="modal-dialog modal-fullscreen">Hasil:
+--------------------------------+
| |
| MEMENUHI LAYAR PENUH |
| |
+--------------------------------+Fullscreen Hanya di Mobile
<div class="modal-dialog
modal-fullscreen-sm-down">Artinya:
- HP → Fullscreen
- Tablet/Desktop → Normal
H. MODAL SCROLLABLE
Jika isi modal panjang.
<div class="modal-dialog modal-dialog-scrollable">Keuntungan:
- Header tetap
- Footer tetap
- Isi dapat discroll
I. MODAL VERTIKAL TENGAH
Default:
Atas layarPosisi tengah:
<div class="modal-dialog modal-dialog-centered">Hasil:
+-------------+
| MODAL |
+-------------+J. FORM LOGIN DALAM MODAL
Contoh implementasi nyata.
<div class="modal-body">
<div class="mb-3">
<label>Username</label>
<input
type="text"
class="form-control">
</div>
<div class="mb-3">
<label>Password</label>
<input
type="password"
class="form-control">
</div>
</div>K. FORM REGISTRASI DALAM MODAL
Nama Lengkap
Email
Password
Konfirmasi PasswordSemua ditempatkan di:
modal-bodydan tombol:
modal-footerL. MODAL KONFIRMASI HAPUS DATA
Kasus paling sering pada aplikasi CRUD.
<button
class="btn btn-danger">
Hapus
</button>Ketika diklik:
Apakah Anda yakin ingin
menghapus data ini?
[Ya] [Tidak]Contoh:
<div class="modal-body">
Apakah Anda yakin ingin
menghapus data ini?
</div>M. MENAMPILKAN GAMBAR DALAM MODAL
Contoh galeri foto.
<div class="modal-body">
<img
src="gambar.jpg"
class="img-fluid">
</div>N. MENAMPILKAN TABEL DALAM MODAL
Contoh:
<div class="modal-body">
<table class="table">
<tr>
<th>ID</th>
<th>Nama</th>
</tr>
</table>
</div>Cocok untuk:
- Detail transaksi
- Data siswa
- Data pelanggan
O. EVENT MODAL
Bootstrap menyediakan event JavaScript.
Ketika Modal Dibuka
var myModal =
document.getElementById('modalSaya')
myModal.addEventListener(
'show.bs.modal',
function(){
alert("Modal dibuka")
})Ketika Modal Ditutup
myModal.addEventListener(
'hidden.bs.modal',
function(){
alert("Modal ditutup")
})P. MEMBUKA MODAL DENGAN JAVASCRIPT
Tanpa tombol.
var modal =
new bootstrap.Modal(
document.getElementById(
'modalSaya'
))
modal.show()Q. MENUTUP MODAL DENGAN JAVASCRIPT
modal.hide()R. STUDI KASUS APLIKASI SEKOLAH
Kasus 1
Tambah Data Siswa
Saat tombol:
Tambah Siswadiklik:
Modal MunculBerisi:
- Nama
- Kelas
- Jurusan
Kasus 2
Detail Nilai Siswa
Klik:
Lihat DetailModal menampilkan:
- Nama
- Nilai
- Absensi
Kasus 3
Konfirmasi Hapus
Klik:
HapusModal:
Yakin menghapus data?LATIHAN PRAKTEK
Latihan 1
Buat modal sederhana berisi:
- Judul
- Isi pesan
- Tombol tutup
Latihan 2
Buat modal login dengan:
- Username
- Password
- Tombol Login
Latihan 3
Buat modal registrasi siswa dengan:
- Nama
- Alamat
- Jurusan
- Tombol Simpan
Latihan 4
Buat modal fullscreen yang menampilkan:
- Profil sekolah
- Visi
- Misi
TUGAS PRAKTEK
Tugas Individu
Buat halaman Data Siswa menggunakan Bootstrap yang memiliki:
- Tabel Data Siswa
- Tombol Tambah Data
- Modal Tambah Data
- Modal Edit Data
- Modal Konfirmasi Hapus
Tugas Proyek SMK
Buat aplikasi frontend Sistem Informasi Perpustakaan dengan fitur:
- Dashboard
- Data Buku
- Data Anggota
- Modal Tambah Buku
- Modal Edit Buku
- Modal Detail Buku
- Modal Konfirmasi Hapus
Kriteria Penilaian:
- Struktur modal benar
- Responsive
- Menggunakan Bootstrap 5
- Menggunakan Form Bootstrap
- Menggunakan Event Modal
- Tampilan profesional