Bootstrap alert组件使用

1. 遇到的主要问题就是无法关闭弹出来的Alert提示：

<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
	
	<!--一定要引入JQuery ，两者具有依赖关系 注意：必须放到bootstrap.js之前-->
    <script src="js/jquery-1.9.1.min.js" > </script>

<script src="js/bootstrap.min.js" type="text/javascript"></script> 


2.测试自动关闭的功能（设置2 S后自动关闭Alert提示Div）
 
 

 
 

  
  
<script>
		$(".alert-success").alert();
		window.setTimeout(function() { $(".alert-success").alert('close'); }, 2000);
		</script>

<div class="alert alert-success fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
        </div>

   
   

    
    


   
   



   
   


   
   


   
   


   
   


   
   


   
   


   
   

3. 事件的调用（可以在关闭和关闭后进行事件的调用）

   
   

    
    样式：
   
   

   
   


   
   

    
    
        <div class="alert alert-block alert-error fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <h4 class="alert-heading">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>
                <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" id="close" data-dismiss="alert" href=".alert-block">Or do this</a>
            </p>
        </div>

    
    

     
     


    
    

    
    


   
   

   
   

    
    


   
   

   
   

    
    


   
   

   
   

    
    Script： 
   
   




 <script>
            $(function(){
                //注意：事件要绑定在UI容器上，而不是关闭按钮中
                $(".alert-block").on("close",function(){
                    alert("这是关闭前调用的")
                })
                $(".alert-block").on("closed",function(){
                    alert("这是关闭后调用的")
                })
            })
             
        </script>