如何使用 Twitter Bootstrap 自动关闭警报？

所有现代 Web 应用程序都使用警报向用户显示消息。这些警报有一个关闭按钮来关闭它们，或者可以使用 Twitter Bootstrap 自动关闭。在这篇文章中，我们将使用 twitter Bootstrap 创建自动关闭警报。

基本思想是使用 jQuery setTimeout() 方法在指定时间后关闭警报。

句法：

setTimeout(function, delay)

注意：延迟以毫秒为单位定义。 1 秒等于 1000 毫秒。

示例 1：在此示例中，使用 id 在脚本中访问警报，然后警报在 5 秒后关闭。

HTML

  

    
          How to Automatically Close Alerts 
          using Twitter Bootstrap ?
      
  
    
    
  
    
    
    
  
    
    
    

  

    Automatically closing the alert
  
    
    
        This alert will automatically 
        close in 5 seconds.
    
  
    
        setTimeout(function () {
  
            // Closing the alert
            $('#alert').alert('close');
        }, 5000);
    

  

示例 2：在此示例中，使用它的类在脚本中访问警报，警报在 2 秒后关闭。

HTML

  

    
    
          How to Automatically Close Alerts 
          using Twitter Bootstrap ?
    
  
    
    
  
    
    
    
      
    
    
    

  

    Automatically closing the alert
      
    
    
        This alert will automatically 
        close in 2 seconds.
    
  
    
        setTimeout(function () {
  
            // Closing the alert
            $('.alert').alert('close');
        }, 2000);
    

  

例3：在本例中，动态添加bootstrap隐藏类给alert，5秒后关闭alert。 addClass()是用于使用 JavaScript 向任何元素添加类的方法。

HTML

  

    
  
    
        How to Automatically Close Alerts
        using Twitter Bootstrap ?
    
  
    
    
  
    
    
    
  
    
    
    

  

    Automatically closing the alert
  
    
    
        This alert will automatically 
        close in 5 seconds.
    
  
    
        setTimeout(function () {
  
            // Adding the class dynamically
            $('#alert').addClass('hide');
        }, 5000);
    

  

输出：