Bootstrap 4 Modal
Bootstrap 4 Modal
Komponen Modal adalah kotak dialog/jendela popup yang ditampilkan di atas halaman saat ini:
Cara Membuat Modal
Contoh berikut menunjukkan cara membuat modal dasar:
Contoh
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Tambahkan animasi
Gunakan .fadekelas untuk menambahkan efek memudar saat membuka dan menutup modal:
Contoh
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Ukuran Modal:
Ubah ukuran modal dengan menambahkan .modal-sm
kelas untuk modal kecil, .modal-lgkelas untuk modal besar, atau .modal-xluntuk modal ekstra besar.
Tambahkan kelas ukuran ke <div>elemen dengan class .modal-dialog:
Modal Kecil
<div class="modal-dialog modal-sm">
Modal Besar
<div class="modal-dialog modal-lg">
Modal Ekstra Besar
<div class="modal-dialog modal-xl">
Secara default, modals berukuran "sedang".
Modal Terpusat
Pusatkan modal secara vertikal dan horizontal di dalam halaman, dengan .modal-dialog-centered
kelas:
Contoh
<div class="modal-dialog modal-dialog-centered">
Modal bergulir
Saat Anda memiliki banyak konten di dalam modal, bilah gulir ditambahkan ke halaman. Lihat contoh di bawah ini untuk memahaminya:
Contoh
<div class="modal-dialog">
Namun, dimungkinkan untuk hanya menggulir di dalam modal, alih-alih halaman itu sendiri, dengan menambahkan .modal-dialog-scrollableke .modal-dialog:
Contoh
<div class="modal-dialog modal-dialog-scrollable">
Referensi Modal Bootstrap Lengkap
Untuk referensi lengkap semua opsi modal, metode, dan acara, buka Referensi Modal Bootstrap JS kami .