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

Twitter Bootstrap 中的模态关闭事件 |设置 1

先决知识： Bootstrap 4 |模态

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

Bootstrap 事件是： show.bs.modal 、 shown.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')
        })
    

  

输出：

点击按钮前：

点击按钮后：

在关闭模态时，观察控制台：

因此，当 modal 关闭时，我们成功地使用

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