Modal Bootstrap Tutorial

Modal Bootstrap Tutorial

6 min read Jun 18, 2024
Modal Bootstrap Tutorial

Modal Bootstrap: Tutorial Lengkap

Modal dalam Bootstrap adalah elemen UI yang menampilkan konten tambahan di atas konten halaman utama. Biasanya digunakan untuk menampilkan dialog, formulir, atau informasi tambahan. Berikut tutorial lengkap tentang modal Bootstrap:

1. Memahami Dasar-Dasar Modal

Struktur Modal:

Modal Bootstrap dibangun dengan menggunakan elemen HTML <div> dengan kelas modal. Berikut struktur dasar modal:


Penjelasan:

  • <div class="modal">: Elemen utama modal.
  • <div class="modal-dialog">: Menentukan ukuran modal (kecil, sedang, besar).
  • <div class="modal-content">: Membungkus konten modal.
  • <div class="modal-header">: Membuat header modal dengan judul dan tombol tutup.
  • <div class="modal-body">: Menampung konten utama modal.
  • <div class="modal-footer">: Membuat area footer modal untuk tombol aksi.

2. Menampilkan Modal

Modal di Bootstrap tidak ditampilkan secara otomatis. Anda perlu menggunakan JavaScript untuk menampilkan modal:

$('#myModal').modal('show'); 
  • #myModal: ID dari elemen modal Anda.
  • modal('show'): Fungsi JavaScript yang menampilkan modal.

3. Mengatur Ukuran Modal

Anda dapat mengatur ukuran modal dengan menambahkan kelas ke <div class="modal-dialog">:

  • modal-sm: Ukuran kecil.
  • modal-lg: Ukuran besar.

4. Menambahkan Tombol Pembuka Modal

Anda dapat menggunakan berbagai tombol untuk membuka modal. Contohnya:


  • data-toggle="modal": Menginstruksikan Bootstrap untuk menggunakan modal.
  • data-target="#myModal": Menetapkan ID modal yang ingin diaktifkan.

5. Mengatur Perilaku Modal

Berikut beberapa atribut dan kelas yang berguna untuk mengatur perilaku modal:

  • data-backdrop="static": Mencegah modal ditutup dengan mengklik di luar area modal.
  • data-keyboard="false": Mencegah modal ditutup dengan menekan tombol Escape.
  • fade: Menambahkan efek transisi fade saat modal ditampilkan dan disembunyikan.

6. Contoh Penggunaan Modal

Berikut contoh lengkap modal yang menampilkan formulir login:




Kesimpulan

Modal Bootstrap adalah elemen UI yang sangat berguna untuk menampilkan konten tambahan di atas konten halaman utama. Dengan mengikuti tutorial ini, Anda dapat membuat modal yang menarik dan fungsional dengan mudah.

Related Post