语义 UI 模式类型

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且具有多种不同的元素，可以使您的网站看起来更加惊人。它使用一个类将 CSS 添加到元素中。

模态通常用于将用户的注意力转移到与主要内容分开的部分，因为进一步的网站交互可能取决于用户需要执行的某些操作。语义 UI 为我们提供了自定义样式的模式。在了解各种模式类型之前，让我们看一下让我们使用语义 UI 模式的类。

语义 UI 模态类：

• modal：这个类用来设置一个标准的 Semantic UI Modal。
• basic：这个类用来设置一个基本的modal，伴随着modal类。

句法：

    ....

示例：在下面的示例中，我们创建了一个标准的语义 UI 模态。

HTML

  

    Semantic UI Modal Types
    
    
    
    
    

  

  
    
        GeeksforGeeks
        Semantic UI Modal Types
        
        
        
            
            
                Standard Modal
            
            
                
                    
                
                
                    Description Header
                    
                        GeeksForGeeks is an amazing 
                        website to learn coding. 
                    
                    
                        Machine Learning, Web Development, 
                        Android Development, Data Science, 
                        you name it, it's all available on 
                        GeeksForGeeks.
                    
                
            
            
                
                    Sort of agree
                
                
                    Agree
                
            
        
        
            Click Me
        
    
  
    
        const openModal = () => {
            $('.ui.modal').modal('setting', 
            'transition', 'scale').modal('show');
        }
    

输出：

语义 UI 模式类型

示例：在下面的示例中，我们创建了一个基本的语义 UI 模态。

HTML

  

    Semantic UI Modal Types
    
  
    
    
    
    

  

  
    
        GeeksforGeeks
        Semantic UI Modal Types
        
        
        
            
                
                Agree or Not?
            
            
               You still don't agree that 
                  GeeksForGeeks is an amazing website?
  
            
            
                
                    I agree
                
                
                    Of course it's awesome
                
            
        
        
          Click Me
        
    
  
    
        const openModal = () => {
            $('.ui.modal').modal('setting', 
            'transition', 'vertical flip').modal('show');
        }
    

输出：

语义 UI 模式类型

参考资料： https ://semantic-ui.com/modules/modal.html