毎日学ぶべきブートストラップ警告ボックス プラグイン_JavaScript スキル

アラート メッセージは、主に、警告や確認メッセージなどの情報をエンド ユーザーに表示するために使用されます。アラート プラグインを使用すると、すべてのアラート メッセージに削除機能を追加できます。

このプラグインの機能を個別に参照したい場合は、alert.js を参照する必要があります。また、ブートストラップ プラグインの概要 の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

1. 使用方法
次の 2 つの方法で警告ボックスの消去機能を有効にできます。
1. data 属性を介して: Data API (Data API) を介してキャンセル可能な関数を追加します。 data-dismiss="alert" を閉じるボタンに追加するだけで、閉じる関数が警告ボックスに自動的に追加されます。

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

2. JavaScript 経由: JavaScript 経由でキャンセル可能な機能を追加します:
$(".alert").alert()

2. 簡単な例
警告ボックスはクリック時の情報ボックスです。
1. 基本的な例

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

2. フェードインおよびフェードアウト効果を追加します

JavaScript を使用している場合は、data-dismiss="alert" を置き換えることができます

//JavaScript 方法

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

Alert プラグインには 2 種類のイベントがあります:

//事件，其他雷同

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

ブートストラップの詳細については、特別なトピックを参照してください:ブートストラップ学習チュートリアル

上記がこの記事の全内容です。Bootstrap 警告ボックス プラグインについて学ぶのに役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。