Bootstrap kotak peringatan

Sebelumnya: kotak pop-up Bootstrap (Popover) widget

Berikutnya: Bootstrap Button (Tombol) widget

Kotak peringatan (Alert) pesan banyak digunakan untuk menampilkan informasi seperti pengguna akhir ingin peringatan atau konfirmasi pesan. Kotak dengan peringatan (Siaga) plug-in, Anda dapat menambahkan membatalkan (memecat) fungsi untuk semua kotak pesan peringatan.

pemakaian

Ada dua cara Anda dapat mengaktifkan kotak peringatan untuk membatalkan (pemecatan) fungsi:

Melalui data atribut: dengan menambahkan API Data (Data API) untuk membatalkan fungsi, hanya perlu menambahkan tombol untuk mematikan data memberhentikan = "alert",maka secara otomatis akan menambahkan fungsi untuk mematikan kotak peringatan.
```
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
	& Waktu;
</a>
```
Dengan JavaScript: menambahkan membatalkan fungsi melalui JavaScript:
```
$ ( ". Alert"). Alert ()
```

contoh

Contoh berikut menunjukkan penggunaan kotak peringatan (Siaga) widget oleh data atribut penggunaan.

contoh

<Div class = "alert peringatan-peringatan" > <A href = "#" class = "dekat" Data-memberhentikan = "alert"> & Kali; </ A> <Kuat> Peringatan! </ Kuat> masalah koneksi jaringan Anda. </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Pilihan

Tidak ada pilihan.

cara

Berikut adalah beberapa kotak peringatan (Siaga) plug-in cara yang berguna:

方法	描述	实例
.alert()	该方法让所有的警告框都带有关闭功能。	$('#identifier').alert();
Close Method.alert('close')	关闭所有的警告框。	$('#identifier').alert('close');

Untuk mengaktifkan animasi ketika tertutup, pastikan Anda menambahkan.fade dan kelas .in.

contoh

Contoh berikut menunjukkan.alert metode ():

contoh

<H3> kotak peringatan (Alert) widget alert () metode </ h3> <Div id = "myAlert" class = "alert peringatan-sukses" > <A href = "#" class = "dekat" Data-memberhentikan = "alert"> & kali; </ a> <Kuat> Sukses! </ Kuat> hasilnya sukses. </ Div> <Div id = "myAlert" class = "alert peringatan-peringatan" > <A href = "#" class = "dekat" Data-memberhentikan = "alert"> & kali; </ a> <Kuat> Peringatan! </ Kuat> masalah koneksi jaringan Anda. </ Div> <Script>

$ (Fungsi () {$ ( ".close") klik (function () {$ ( "#myAlert") alert (); ..});});

</ Script> [/ mycode2] </ div> Situs <A target = "_blank" href = "/try/try.php?filename=bootstrap3-plugin-alert-method1" class = "tryitbtn"> coba »</ a> </ Div> <P> Contoh berikut menunjukkan <b> .alert ( 'dekat' ) Penggunaan </ b> Metode: </ p> <Div class = "contoh"> <H2 class = "contoh"> contoh </ h2> <Div = "Example_code"> [mycode3 kelas type = "html"] <h3> kotak peringatan (Alert) widget alert ( 'dekat') metode </ h3> <Div id = "myAlert" class = "alert peringatan-sukses" > <A href = "#" class = "dekat" Data-memberhentikan = "alert"> & kali; </ a> <Kuat> Sukses! </ Kuat> hasilnya sukses. </ Div> <Div id = "myAlert" class = "alert peringatan-peringatan" > <A href = "#" class = "dekat" Data-memberhentikan = "alert"> & kali; </ a> <Kuat> Peringatan! </ Kuat> masalah koneksi jaringan Anda. </ Div> <Script>

$ (Fungsi () {$ ( ".close") klik (function () {$ ( "#myAlert") alert ( 'dekat'); ..});});

</ Script>

Coba »

Anda dapat melihat semua kotak peringatan diterapkan off fitur mati setiap kotak peringatan, sisanya kotak peringatan lainnya akan ditutup.

peristiwa

Tabel berikut berisi kotak peringatan (Alert) plug-in untuk digunakan dalam acara tersebut. Peristiwa ini dapat digunakan ketika fungsi hook.

事件	描述	实例
close.bs.alert	当调用close实例方法时立即触发该事件。	$('#myalert').bind('close.bs.alert', function () { // 执行一些动作... })
closed.bs.alert	当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	$('#myalert').bind('closed.bs.alert', function () { // 执行一些动作... })

contoh

Contoh berikut menunjukkan kotak acara peringatan (Siaga) plug-in:

contoh

<Div id = "myAlert" class = "alert peringatan-sukses" > <A href = "#" class = "dekat" Data-memberhentikan = "alert"> & kali; </ a> <Kuat> Sukses! </ Kuat> hasilnya sukses. </ Div> <Script>