Pemalam kotak amaran Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript-tutorial js-php.cn

Pemalam kotak amaran Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:04:01

asal

1376 orang telah melayarinya

Mesej amaran kebanyakannya digunakan untuk memaparkan maklumat seperti amaran atau mesej pengesahan kepada pengguna akhir. Menggunakan pemalam Alert, anda boleh menambah fungsi penolakan pada semua mesej amaran.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk alert.js. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.

1
Anda boleh mendayakan fungsi pemecatan kotak amaran dalam dua cara berikut: 1. Melalui atribut data: Tambah fungsi boleh dibatalkan melalui API Data (API Data) Cuma tambah data-dismiss="alert" pada butang tutup, dan fungsi penutupan akan ditambahkan secara automatik pada kotak amaran.

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
 &times;
</a>

Salin selepas log masuk

2. Melalui JavaScript: Tambah fungsi boleh dibatalkan melalui JavaScript:

$(".alert").alert()

2. Contoh mudah
Kotak amaran ialah kotak maklumat pada jam klik. 1. Contoh asas

<div class="alert alert-warning">                   
 <button class="close" type="button" data-dismiss="alert">            
  <span>&times;</span>                     
 </button>                        
 <p>                          
  警告：您的浏览器不支持！                       
 </p>                          
</div>

Salin selepas log masuk

2. Tambah kesan fade in dan fade out

Jika anda menggunakan JavaScript, anda boleh menggantikan data-dismiss="alert"

//JavaScript 方法

$('.close').on('click', function() {
 $('#alert').alert('close');
})

Salin selepas log masuk

Terdapat dua jenis acara dalam pemalam Makluman:

//事件，其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用！');
});

Salin selepas log masuk

Untuk maklumat lanjut tentang Bootstrap, sila rujuk topik khas:

Tutorial pembelajaran Bootstrap

Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari pemalam kotak amaran Bootstrap.