Bootstrap kotak modal (Modal) widget

Sebelumnya: Bootstrap transisi (Transition) widget

Berikutnya: Bootstrap menu dropdown (Dropdown) widget

Modal Box (modal) yang terhampar di bentuk induk subform. Umumnya, tujuannya adalah untuk menampilkan konten dari satu sumber, dan dapat memiliki beberapa interaksi tanpa meninggalkan bentuk induk. Subform dapat memberikan informasi, interaksi dan sebagainya.

Jika Anda ingin merujuk pada plug-in fitur individu, Anda perlu referensimodal.js.Atau, seperti Bootstrap Ikhtisar Plugin bab disebutkan, Anda bisa merujuk kebootstrap.jsatau versi kompresibootstrap.min.js.

pemakaian

Anda dapat mengganti kotak modal konten tersembunyi (Modal) plug-in:

Melalui atribut Data: mengatur properti data-ubah = "moda angkutan"dalam unsur-unsur controller (seperti tombol atau link), dan mengaturdata target = "# pengenal"atauhref = "# identifier"untuk menetapkan modus tertentu harus diaktifkan kotak negara (dengan id = "identifier").
Dengan JavaScript: Dengan menggunakan teknik ini, Anda dapat dengan garis sederhana dari JavaScript untuk memanggil kotak modal dengan id = "identifier" dari:
```
$ ( '# Identifier'). Modal (Pilihan)
```

contoh

Sebuah statis modal window Misalnya, seperti yang ditunjukkan dalam contoh berikut:

contoh

<H2> buat kotak modal (Modal) </ h2> <! - Tombol untuk memicu kotak modal -> <Tombol class = "btn btn-utama btn -lg" Data-ubah = "modal" Data-target = "#myModal"> Mulai Demo bingkai modal </ button> <! - Box Modal (Modal) -> <Div class = "modal fade" id = "myModal" tabindex = "-1" Peran = "dialog" aria-labelledby = "myModalLabel" aria tersembunyi = "true"> <Div class = "modal-dialog"> <Div class = "modal-content"> <Div class = "modal-header"> <Tombol ketik = "tombol" class = "dekat" Data-memberhentikan = "modal" aria tersembunyi = "true"> & kali; </ button> <H4 class = "modal-judul" id = "myModalLabel"> kotak modal (Modal) Judul </ h4> </ Div> <Div class = "modal-body"> menambahkan beberapa teks di sini </ div> <Div class = "modal-footer"> <Tombol ketik = "tombol" class = "btn btn-default" Data-memberhentikan = "modal"> Tutup </ button> <Tombol ketik = "tombol" class = "btn btn-utama" > Kirim Perubahan </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal -> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Kode penjelasan:

jendela modal, Anda harus memiliki beberapa jenis pemicu. Anda dapat menggunakan tombol atau link. Di sini kita menggunakan tombol.
Jika Anda melihat dekat pada kode di atas, Anda akan menemukan dalam <button>tag, data target = "# myModal " adalah tujuan yang ingin Anda memuat pada kotak halaman modal.Anda dapat membuat beberapa kotak modal pada halaman, dan kemudian membuat pemicu yang berbeda untuk masing-masing kotak modal. Sekarang, jelas, Anda tidak dapat memuat beberapa modul pada saat yang sama, tetapi Anda dapat membuat beberapa pemuatan pada waktu yang berbeda pada halaman.
Modal kotak Dua hal yang perlu diperhatikan:
1. Yang pertama adalah.modal, untuk <div> mengenali kotak modal konten.
2. Yang kedua adalahkelas .fade.Ketika kotak modal diaktifkan, maka akan menyebabkan isi memudar.
aria-labelledby = "myModalLabel", referensi atribut modal judul kotak.
aria tersembunyi properti = "true"untuk memegang jendela modal tidak terlihat sampai memicu dipecat up (seperti mengklik tombol yang relevan).
Gaya kepala <Div class = "modal-header">, modal-header didefinisikan jendela modal kelas.
class = "dekat", dekat adalah kelas CSS, jendela modal digunakan untuk mengatur gaya tombol Tutup.
Data-memberhentikan = "moda angkutan", HTML5 data atribut adalah kustom.Di mana ia digunakan untuk menutup jendela modal.
class = "modal-body", adalah CSS Bootstrap kelas CSS untuk gaya ditetapkan sebagai jendela modal utama.
class = "modal-footer", adalah CSS Bootstrap kelas CSS untuk styling bagian bawah jendela modal.
Data-ubah = "moda angkutan", HTML5 custom data data atribut-ubah untuk membuka jendela modal.

Pilihan

Ada beberapa pilihan yang dapat digunakan untuk menyesuaikan jendela modal (Modal Window) terlihat dan merasa, yang diperoleh dengan atribut data atau JavaScript untuk lulus. Tabel berikut ini berisi opsi ini:

选项名称	类型/默认值	Data 属性名称	描述
backdrop	boolean 或 string 'static' 默认值：true	data-backdrop	指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard	boolean 默认值：true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show	boolean 默认值：true	data-show	当初始化时显示模态框。
remote	path 默认值：false	data-remote	使用 jQuery.load方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

cara

Berikut adalah beberapa metode yang berguna dan modal () digunakan bersama-sama.

方法	描述	实例
Options:.modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	$('#identifier').modal({ keyboard: false })
Toggle:.modal('toggle')	手动切换模态框。	$('#identifier').modal('toggle')
Show:.modal('show')	手动打开模态框。	$('#identifier').modal('show')
Hide:.modal('hide')	手动隐藏模态框。	$('#identifier').modal('hide')

contoh

Contoh berikut menunjukkan metode:

contoh

<! - Box Modal (Modal) -> <Div class = "modal fade" id = "myModal" tabindex = "-1" Peran = "dialog" aria-labelledby = "myModalLabel" aria tersembunyi = "true"> <Div class = "modal-dialog"> <Div class = "modal-content"> <Div class = "modal-header"> <Tombol ketik = "tombol" class = "dekat" Data-memberhentikan = "modal" aria tersembunyi = "true"> × </ button> <H4 class = "modal-judul" id = "myModalLabel"> kotak modal (Modal) Judul </ h4> </ Div> <Div class = "modal-body"> Tekan tombol ESC untuk keluar. </ Div> <Div class = "modal-footer"> <Tombol ketik = "tombol" class = "btn btn-default" Data-memberhentikan = "modal"> Tutup </ button> <Tombol ketik = "tombol" class = "btn btn-utama" > Kirim Perubahan </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal-dialog -> </ Div> <! - /.modal -> <Script> $ (function () {$ ( '# myModal') modal ({Keyboard :. Benar})}); </ script>

Coba »

Hasilnya adalah sebagai berikut:

Cukup klik tombol ESC, jendela modal adalah berhenti.

peristiwa

Tabel berikut berisi daftar acara untuk menggunakan kotak modal. Peristiwa ini dapat digunakan ketika fungsi hook.

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

contoh

Contoh berikut menunjukkan penggunaan acara:

contoh

<! - Box Modal (Modal) -> <H2> box modal (Modal) Plug-in acara </ h2> <! - Tombol untuk memicu kotak modal -> <Tombol class = "btn btn-utama btn -lg" Data-ubah = "modal" Data-target = "#myModal"> Mulai Demo bingkai modal </ button> <! - Box Modal (Modal) -> <Div class = "modal fade" id = "myModal" tabindex = "-1" Peran = "dialog" aria-labelledby = "myModalLabel" aria tersembunyi = "true"> <Div class = "modal-dialog"> <Div class = "modal-content"> <Div class = "modal-header"> <Tombol ketik = "tombol" class = "dekat" Data-memberhentikan = "modal" aria tersembunyi = "true"> × </ button> <H4 class = "modal-judul" id = "myModalLabel"> kotak modal (Modal) Judul </ h4> </ Div> <Div class = "modal-body"> Klik tombol Close untuk memeriksa fungsi event. </ Div> <Div class = "modal-footer"> <Tombol ketik = "tombol" class = "btn btn-default" Data-memberhentikan = "modal"> Tutup </ button> <Tombol ketik = "tombol" class = "btn btn-utama" > Kirim Perubahan </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal-dialog -> </ Div> <! - /.modal -> <Script> $}) (function () {$ ( '# myModal') modal ( 'menyembunyikan')});. </ Script> <Script> $ (function () {$ ( '# myModal') dari ( 'hide.bs.modal', function () {alert ( ' Hei, aku mendengar kau seperti box modal ...'); })}); </ script >

Coba »

Hasilnya adalah sebagai berikut: