Selamat datang di tutorial Bootstrap ke-15! Kali ini kita akan membahas salah satu komponen paling berguna untuk interaksi pengguna: Modal. Modal adalah jendela pop-up yang muncul di atas halaman utama untuk menampilkan informasi penting, formulir, galeri gambar, atau notifikasi tanpa harus meninggalkan halaman saat ini.
Bootstrap menyediakan komponen Modal yang sangat mudah digunakan, responsif, dan fleksibel. Anda bisa menggunakannya untuk form login, menampilkan detail produk, konfirmasi tindakan (seperti menghapus data), dan banyak lagi.
Bagaimana Modal Bekerja?
Komponen Modal Bootstrap terdiri dari dua bagian utama:
- Pemicu (Trigger): Ini adalah elemen (biasanya tombol atau link) yang akan diklik oleh pengguna untuk membuka jendela modal.
- Konten Modal: Ini adalah kode HTML yang mendefinisikan tampilan dan isi dari jendela pop-up itu sendiri. Bagian ini awalnya tersembunyi.
Keduanya dihubungkan melalui atribut data-bs-target pada pemicu, yang nilainya menunjuk ke id dari konten modal.
Struktur Dasar Modal
Mari kita buat sebuah modal sederhana. Pertama, kita siapkan tombol pemicunya.
1. Tombol Pemicu (Trigger)
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contohModal">
Buka Modal
</button>
Atribut kunci di sini adalah:
data-bs-toggle="modal": Memberitahu JavaScript Bootstrap bahwa tombol ini berfungsi untuk mengontrol modal.data-bs-target="#contohModal": Menghubungkan tombol ini ke modal denganid="contohModal".
2. Konten Modal
Sekarang, mari kita buat struktur HTML untuk jendela modalnya. Kode ini bisa ditempatkan di mana saja di dalam <body>, tetapi biasanya diletakkan di bagian bawah sebelum tag penutup </body>.
<div class="modal fade" id="contohModal" tabindex="-1" aria-labelledby="contohModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="contohModalLabel">Judul Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Ini adalah isi dari jendela modal. Anda bisa menempatkan teks, gambar, formulir, atau elemen HTML lainnya di sini.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary">Simpan Perubahan</button>
</div>
</div>
</div>
</div>
Mari kita bedah struktur konten modal:
.modal: Wrapper utama untuk seluruh komponen modal. Kelas.fademenambahkan efek transisi yang halus saat modal muncul dan hilang..modal-dialog: Mengatur posisi dan ukuran modal..modal-content: Wadah untuk styling (seperti border, background, dan shadow) dari modal itu sendiri..modal-header: Bagian atas modal, biasanya berisi judul (.modal-title) dan tombol tutup (.btn-close)..modal-body: Bagian utama tempat konten Anda diletakkan..modal-footer: Bagian bawah modal, biasanya digunakan untuk menempatkan tombol aksi (seperti Simpan, Tutup, atau Konfirmasi).data-bs-dismiss="modal": Atribut ini ditambahkan pada tombol yang fungsinya untuk menutup modal.
Kustomisasi dan Opsi
Bootstrap menyediakan banyak kelas utilitas untuk mengubah perilaku dan tampilan modal.
Ukuran Modal
Anda bisa mengubah ukuran modal dengan menambahkan kelas pada <div> dengan kelas .modal-dialog.
.modal-sm: Untuk modal kecil..modal-lg: Untuk modal besar..modal-xl: Untuk modal ekstra besar.
Contoh: <div class="modal-dialog modal-lg">
Modal Vertikal di Tengah
Untuk membuat modal muncul di tengah layar secara vertikal, tambahkan kelas .modal-dialog-centered pada .modal-dialog.
Contoh: <div class="modal-dialog modal-dialog-centered">
Modal Fullscreen
Anda bisa membuat modal menutupi seluruh layar, yang sangat berguna di perangkat mobile. Gunakan kelas .modal-fullscreen. Ada juga variasi responsif seperti .modal-fullscreen-sm-down yang akan fullscreen di layar kecil (sm) ke bawah.
Contoh: <div class="modal-dialog modal-fullscreen">
Static Backdrop (Latar Belakang Statis)
Secara default, pengguna bisa menutup modal dengan mengklik area gelap di luar modal (backdrop). Jika Anda ingin mencegah ini dan memaksa pengguna untuk berinteraksi dengan tombol di dalam modal, tambahkan atribut berikut pada wrapper utama modal:
data-bs-backdrop="static" dan data-bs-keyboard="false"
Atribut data-bs-keyboard="false" juga akan mencegah modal tertutup saat tombol Escape ditekan.
Contoh: <div class="modal fade" id="contohModal" data-bs-backdrop="static" data-bs-keyboard="false" ...>
Kesimpulan
Modal adalah komponen yang sangat kuat untuk meningkatkan pengalaman pengguna dengan menyajikan informasi atau formulir dalam konteks tanpa mengganggu alur utama pengguna. Dengan struktur yang logis dan opsi kustomisasi yang melimpah, Bootstrap membuat implementasi pop-up yang profesional menjadi sangat mudah. Anda bisa menggunakannya untuk berbagai keperluan, menjadikannya salah satu komponen yang paling sering digunakan dalam pengembangan web modern.
