Bootstrap - 警告外掛

警告訊息主要用於向終端使用者顯示資訊，例如警告或確認訊息。使用警告訊息外掛，您可以為所有警告訊息新增關閉功能。

如果您想單獨包含此外掛功能，則需要 alert.js。否則，如 Bootstrap 外掛概述 一章所述，您可以包含 bootstrap.js 或壓縮後的 bootstrap.min.js。

用法

您可以透過以下兩種方式啟用警告框的關閉功能：

• 透過資料屬性 - 要透過資料 API 關閉，只需將 data-dismiss = "alert" 新增到您的關閉按鈕，即可自動賦予警告框關閉功能。

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

• 透過 JavaScript - 要透過 JavaScript 關閉，請使用以下語法：

$(".alert").alert()

示例

以下示例演示瞭如何透過資料屬性使用警告外掛。

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

選項

這裡沒有選項。

方法

以下是警告外掛的一些有用方法：

$('#identifier').alert();

$('#identifier').alert('close');

要啟用警告框在關閉時淡出動畫，請確保它們已應用 .fade 和 .in 類。

示例

以下示例演示瞭如何使用 .alert() 方法：

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script> 

以下示例演示瞭如何使用 .alert('close') 方法：

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>   

使用 嘗試一下 編輯器嘗試此程式碼。您可以看到關閉功能已應用於所有警告訊息，即關閉任何警告訊息，其餘警告訊息也會關閉。

事件

下表列出了與警告外掛一起使用的事件。此事件可用於掛接到警告功能。

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

示例

以下示例演示了警告外掛事件：

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>