警告框

案例

通過這個插件可以為所有警告框增加關(guān)閉功能。

 <div id="alert1" class="alert alert-warning fade in">
        <button id='alert1' type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div> 

http://wiki.jikexueyuan.com/project/bootstrap/images/bt9.png" alt="" />

再來一個小例子

<div class="alert alert-danger fade in">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <h4>Oh snap! You got an error!</h4>
        <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
        <p>
          <button type="button" class="btn btn-danger">Take this action</button>
          <button type="button" class="btn btn-success">Or do this</button>
        </p>
      </div>

http://wiki.jikexueyuan.com/project/bootstrap/images/bt10.png" alt="" />

通過 data-dismiss 屬性即可開始關(guān)閉警告框的功能。無須任何的 JavaScript 的代碼。只需為關(guān)閉按鈕設(shè)置 data-dismiss="alert" 即可自動為警告框賦予關(guān)閉功能。

用法

如果通過 JavaScript 啟用警告框關(guān)閉功能：

我們來修改一下第一簡單的小例子

 <div id="alert1" class="alert alert-warning fade in">
        <button id='alert1' type="button" class="close" onclick="Test()" aria-hidden="true">&times;</button>
        <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div>  

我們主要是去掉了關(guān)閉按鈕的 data-dismiss 屬性，然后添加了一個 onclick 的單擊按鈕事件，也就是關(guān)閉警示框的事件。

來看一下如何通過 JavaScript 來關(guān)閉警示框

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

為所有警告框加入關(guān)閉功能。如果希望警告框被關(guān)閉時呈現(xiàn)動畫效果，請確保為其添加了 .fade 和 .in。

事件

Bootstrap 中的警告框暴露了一組事件，允許你進(jìn)行監(jiān)聽。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt11.png" alt="" />

 <script type="text/javascript"> $('#alert1').bind('close.bs.alert', function () {
          alert(1);
    }) </script>

添加以上代碼之后，再點(diǎn)擊關(guān)閉按鈕的時候會先執(zhí)行 function 里面的代碼，然后再關(guān)閉警示框的。