Bootstrap - Modals: Panduan Pemula

Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menarik Bootstrap Modals. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir panduan ini, Anda akan dapat membuat jendela muncul seperti seorang ahli!

Apa Itu Modal?

Sebelum kita masuk ke dalam, mari kita pahami apa itu modal. Bayangkan Anda membaca buku, dan tiba-tiba catatan kecil berwarna sticky muncul dengan informasi penting. Itu sebenarnya apa yang dilakukan modal di website! Itu adalah kotak dialog atau jendela muncul yang muncul di atas halaman saat ini.

Komponen Modal

Mari kita mulai dengan struktur dasar modal Bootstrap:

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Judul Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
</div>
<div class="modal-body">
<p>Teks badan modal disini.</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 kitauraikan ini:

• <div> luar dengan kelas "modal" adalah wadah utama.
• Dalamnya, kita memiliki "modal-dialog" yang mengontrol bentuk dan posisi modal.
• "modal-content" memegang konten nyata modal kita.
• Kita kemudian memiliki tiga bagian: header, body, dan footer.

Latar Belakang Statis

kadang-kadang, Anda ingin modal Anda tetap ada sampai pengguna berinteraksi dengannya. Itu adalah saat latar belakang statis berguna:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- Konten modal disini -->
</div>

Dengan menambahkan data-bs-backdrop="static", modal tidak akan tutup saat mengklik di luar itu. data-bs-keyboard="false" menghindari penutupan dengan tombol Esc.

Modal Dapat Scrool

Ada banyak konten? Tidak masalah! Buat modal Anda dapat diスクロール:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Konten modal disini -->
</div>

Menambahkan kelas modal-dialog-scrollable memungkinkan badan modal untuk diスクロール sementara menjaga header dan footer di tempat.

Vertikal Tengah

Ingin modal Anda berada di tengah layar? Mudah-mudahan!

<div class="modal-dialog modal-dialog-centered">
<!-- Konten modal disini -->
</div>

Kelas modal-dialog-centered bekerja untuk menengahkan modal Anda secara vertikal.

Tips dan Popovers

Anda bahkan dapat menggunakan tips dan popovers dalam modal Anda. Hanya ingat untuk menginisialisasikan mereka:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

Menggunakan Grid

Sistem grid Bootstrap juga bekerja dalam modals! Ini contohnya:

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

Ini membuat tata letak dua kolom dalam badan modal Anda.

Mengubah Konten Modal

Anda dapat mengubah konten modal Anda secara dinamis. Ini cara nya:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'Pesan baru ke ' + recipient
modalBodyInput.value = recipient
})

Skrip ini mengubah konten modal berdasarkan tombol yang memicu itu.

Bertukar Antara Modals

Anda bahkan dapat berpindah antara modals yang berbeda:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- Konten modal pertama -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Buka modal kedua</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- Konten modal kedua -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Kembali ke pertama</button>
</div>

Mengubah Animasi

Ingin menambahkan perasaan ke masuknya modal Anda? Cobalah mengubah animasi:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Konten modal -->
</div>

Kelas fade menambahkan efek penggelapan. Anda dapat membuat animasi khusus menggunakan CSS!

Tinggi Dinamis

Modal dapat menyesuaikan tingginya berdasarkan konten:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Konten modal dengan tinggi berubah -->
</div>

Kelas modal-dialog-scrollable memastikan modal Anda terlihat bagus tanpa menghiraukan panjang konten.

Aksesibilitas

Selalu pertimbangkan aksesibilitas! Gunakan aria-labelledby untuk mengacu ke judul modal:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Judul Modal</h5>
<!-- Konten modal lainnya -->
</div>
</div>
</div>
</div>

Ukuran Opsional

Modal datang dalam ukuran yang berbeda:

<!-- Modal kecil -->
<div class="modal-dialog modal-sm">...</div>

<!-- Modal besar -->
<div class="modal-dialog modal-lg">...</div>

<!-- Modal ekstra besar -->
<div class="modal-dialog modal-xl">...</div>

Modal Layar Penuh

Ingin modal Anda mengambil seluruh layar? Gunakan kelas layar penuh:

<div class="modal-dialog modal-fullscreen">
<!-- Konten modal -->
</div>

Anda juga dapat membuatnya layar penuh hanya untuk ukuran layar tertentu:

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- Konten modal -->
</div>

Modal ini akan menjadi layar penuh di layar kecil dan kecilnya.

Dan itu saja! Sekarang Anda telah dilengkapi pengetahuan untuk membuat modals yang menakjubkan menggunakan Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Selamat coding!

Metode	Deskripsi
.modal(options)	Mengaktifkan konten Anda sebagai modal. Menerima objek opsi opsional.
.modal('toggle')	Secara manual menyalakan modal.
.modal('show')	Secara manual membuka modal.
.modal('hide')	Secara manual menyembunyikan modal.
.modal('handleUpdate')	Secara manual menyesuaikan posisi modal jika tinggi modal berubah saat ia terbuka (misalnya, jika scrollbar muncul).
.modal('dispose')	Menghancurkan modal elemen.

Credits: Image by storyset