Bootstrap - Modals: Panduan untuk Pemula

Hai teman-teman, pengembang web masa depan! Hari ini, kita akan melompat ke dunia yang menarik dari Bootstrap Modals. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir panduan ini, Anda akan membuat jendela muncul seperti seorang pro!

Apa Itu Modal?

Sebelum kita masuk ke detil, mari kita fahami apa itu modal. Bayangkan Anda membaca buku, dan tiba-tiba catatan sticky kecil muncul dengan informasi penting. Itu sebenarnya apa yang dilakukan modal di website! Itu adalah kotak dialog atau jendela popup 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="Close"></button>
</div>
<div class="modal-body">
<p>Teks badan modal ditempatkan 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 kitauraikan ini:

• <div> luar dengan kelas "modal" adalah wadah utama.
• Didalamnya, 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 modalku tetap ada sampai pengguna berinteraksi dengannya. Itu di mana latar belakang statis membantu:

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

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

Modal Bisa Scrol

Banyak konten? Tak masalah! Buat modalku bisa di geser:

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

Menambahkan kelas modal-dialog-scrollable memungkinkan badan modal untuk digeser sementara menjaga header dan footer di tempatnya.

Vertikal Tengah

Ingin modalku berada di tengah layar? Mudah-mudahan!

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

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

Tips dan Popovers

Anda bahkan dapat menggunakan tips dan popovers dalam modalku. Hanya ingat untuk menginisiasikan 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 modalku! 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 di dalam badan modalku.

Mengubah Konten Modal

Anda dapat mengubah konten modalku 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 modalku berdasarkan tombol yang memicu nya.

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 kejutan ke masuknya modalku? Cobalah mengubah animasi:

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

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

Ketinggian Dinamis

Modals dapat menyesuaikan tingginya berdasarkan konten:

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

Kelas modal-dialog-scrollable memastikan modalku terlihat bagus tanpa menghiraukan panjang kontennya.

Aksesibilitas

Selalu pertimbangkan aksesibilitas! Gunakan aria-labelledby untuk merujuk ke judul modalku:

<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

Modals tersedia 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 modalku mengambil keseluruhan layar? Gunakan kelas layar penuh:

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

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

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

Modal ini akan layar penuh pada layar kecil dan kecilnya.

Dan itu saja! Sekarang Anda dilengkapi pengetahuan untuk membuat modals yang menakjubkan menggunakan Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Semoga sukses dalam coding Anda!

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 modalku buka (misalnya, jika scrollbar muncul).
.modal('dispose')	Menghancurkan modal elemen.

Credits: Image by storyset