Semantic-UI 模态活动状态

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。 Semantic UI Modal 在屏幕上方显示暂时阻止与站点主视图交互的内容。我们需要根据 modal 提供的详细信息进行操作。 Semantic-UI Modal Active State 用于设置活动模态是否在页面上可见。

Semantic-UI Modal Active State 类：

• UI active modal：该类用于设置页面上是否可见一个active modal。

句法：

示例：下面的示例说明了 Semantic-UI 模态活动状态。

HTML

  

    
    
    
    
    
    
    
    
    
        .icon {
            margin: 16px;
        }
    

  

    
        
            
                
                    GeeksforGeeks
                
            
             Semantic-UI Modal Active State 
        
  
        
            
            Welcome to GeeksforGeeks
  
            Find the best programming tutorials here.
  
            
                Open Modal
            
            
                
                    Welcome to GeeksforGeeks
                
                
                    
                        Data Structures
                        Algorithms
                        Machine Learning
                    
                    
                
                
                    
                         Close
                    
                
            
        
    
    
        const openModal = () => {
            $('.ui.modal').modal('show')
        }
    

  

输出：

参考链接： https://semantic-ui.com/modules/modal.html#active