如何处理Twitter Bootstrap中的模式关闭事件？

Twitter Bootstrap中的模式关闭事件套装1

先决条件知识： Bootstrap 4 |模态

Twitter Bootstrap的模式类提供了一些在标准Bootstrap模式类中触发的事件。 Bootstrap Modals提供了一个轻量级的，多用途的JavaScript弹出窗口，该弹出窗口是可自定义的且响应迅速。它们可用于显示网站中的警报弹出窗口，视频和图像。 Bootstrap模式分为三个主要部分：页眉，正文和页脚。

Bootstrap事件包括： show.bs.modal ， show.bs.modal ， hide.bs.modal ， hidden.bs.modal等。在所有这些事件中，我们对hide.bs.modal和hidden.bs感兴趣.modal事件。

• hide.bs.modal ：调用hide实例方法后，立即触发此事件。
• hidden.bs.modal ：当模态完成向用户的隐藏时，将触发此事件，然后将等待CSS转换完成。

例子：

HTML

  

    
    
    
  
    
    
  
    
        Modal closing event in Bootstrap
    
  
    
        h1,
        h6 {
            margin: 2%;
        }
  
        .btn {
            margin-left: 2%;
        }
    

  

    
        
            GeeksforGeeks
        
  
        
        
            Launch Modal
        
  
        
        
            
                
                    
                        
                            GeeksforGeeks
                        
                          
                        
                        
                            ×
                        
                    
  
                    
  
                        
                          

                            Articles that need little modification/
                            improvement from reviewers are published 
                            first. To quickly get your articles 
                            reviewed, please refer existing articles, 
                            their formating style, coding style, and
                            try to make your close to them.
                        
  
                    
                    
                        Close
  
                        
                        
                            okay
                        
                        
                    
                
            
        
  
        
        
        
        
          
        
        
          
        
        
    
  
    
    
        $('#gfgModal').on('hidden.bs.modal', function (e) {
  
            // Fire a function in the console
            console.log('Function executed when gfgModal closed');
              
            // Alert the user
            alert('Alert fired when gfgModal closed')
        })
    

  

输出：

单击按钮之前：

单击按钮后：

在关闭模式时，请注意控制台：

因此，当模式关闭时，我们将使用

• 在控制台中触发输出
• 提醒用户