The Modal Plugin
The Modal plugin kotak dialog / popup window yang ditampilkan di atas halaman saat ini:
Tip: Plugin dapat dimasukkan secara individual (menggunakan individu Bootstrap ini "modal.js" file), 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>
Cobalah sendiri " misalnya Dijelaskan
The "Trigger" bagian:
Untuk memicu jendela modal, Anda perlu menggunakan tombol atau link.
Kemudian mencakup dua data-* atribut:
-
data-toggle="modal"membuka jendela modal -
data-target="#myModal"menunjuk ke id dari modal yang
The "Modal" bagian:
Orang tua <div> dari modal yang harus memiliki ID yang sama dengan nilai atribut data sasaran yang digunakan untuk memicu modal ("myModal") .
The .modal kelas mengidentifikasi isi dari <div> sebagai modal dan membawa fokus untuk itu.
The .fade kelas menambahkan efek transisi yang memudar modal yang masuk dan keluar. Hapus kelas ini jika Anda tidak ingin efek ini.
Atribut role="dialog" meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar.
The .modal-dialog kelas menetapkan lebar yang tepat dan margin modal tersebut.
"Isi Modal" bagian:
The <div> dengan class="modal-content " gaya yang modal (perbatasan, latar belakang warna, dll). Di dalam ini <div> , tambahkan modal sundulan, tubuh, dan footer.
The .modal-header kelas digunakan untuk menentukan gaya untuk header dari modal tersebut. The <button> dalam header memiliki data-dismiss="modal" atribut yang menutup modal jika Anda klik di atasnya. The .close gaya kelas tombol tutup, dan .modal-title gaya kelas header dengan line-height yang tepat.
The .modal-body kelas digunakan untuk menentukan gaya untuk tubuh modal tersebut. Menambahkan markup HTML sini; paragraf, gambar, video, dll
The .modal-footer kelas digunakan untuk menentukan gaya untuk footer dari modal tersebut. Perhatikan bahwa daerah ini yang benar selaras secara default.
Ukuran modal
Mengubah ukuran modal dengan menambahkan .modal-sm kelas untuk kata modal kecil atau .modal-lg kelas untuk kata modal besar.
Tambahkan kelas ukuran ke <div> elemen dengan kelas .modal-dialog :
 | Secara default, kata modal yang sedang dalam ukuran. |
|---|
Menyelesaikan Bootstrap Modal Referensi
Untuk referensi lengkap semua pilihan modal, metode dan peristiwa, pergi ke kami Bootstrap JS Modal Referensi .