Plugin Modal Bootstrap
Plugin Modal
Plugin Modal adalah kotak dialog/jendela popup yang ditampilkan di atas halaman saat ini:
Tip: Plugin dapat dimasukkan satu per satu (menggunakan file "modal.js" individual Bootstrap), atau sekaligus (menggunakan "bootstrap.js" atau "bootstrap.min.js").
Cara Membuat Modal
Contoh berikut menunjukkan cara membuat modal dasar:
Contoh
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Contoh Dijelaskan
Bagian "Pemicu":
Untuk memicu jendela modal, Anda perlu menggunakan tombol atau tautan.
Kemudian sertakan dua atribut data-*:
data-toggle="modal"membuka jendela modaldata-target="#myModal"menunjuk ke id modal
Bagian "Modal":
Induk <div>modal harus memiliki ID yang sama dengan nilai atribut target data yang digunakan untuk memicu modal ("myModal").
Kelas .modalmengidentifikasi konten <div>sebagai modal dan memfokuskannya.
Kelas .fademenambahkan efek transisi yang memudarkan modal masuk dan keluar. Hapus kelas ini jika Anda tidak menginginkan efek ini.
Atribut role="dialog"meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar.
Kelas .modal-dialogmenetapkan lebar dan margin modal yang tepat.
Bagian "Konten modal":
With " <div>memberi class="modal-contentgaya pada modal (border, background-color, dll.). Di dalam this <div>, tambahkan header, body, dan footer modal.
Kelas .modal-headerdigunakan untuk mendefinisikan gaya untuk header modal. Bagian <button>dalam header memiliki data-dismiss="modal"atribut yang menutup modal jika Anda mengkliknya. Kelas .closemenata tombol tutup, dan .modal-titlekelas menata header dengan ketinggian garis yang tepat.
Kelas .modal-bodydigunakan untuk mendefinisikan gaya untuk badan modal. Tambahkan markup HTML apa pun di sini; paragraf, gambar, video, dll.
Kelas .modal-footerdigunakan untuk mendefinisikan gaya untuk footer modal. Perhatikan bahwa area ini rata kanan secara default.
Ukuran Modal:
Ubah ukuran modal dengan menambahkan .modal-sm
kelas untuk modal kecil atau .modal-lgkelas untuk modal 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">
Secara default, modals berukuran sedang.
Referensi Modal Bootstrap Lengkap
Untuk referensi lengkap semua opsi modal, metode, dan acara, buka Referensi Modal Bootstrap JS kami .