语义 UI 模态

Semantic UI是一个开源框架，它有一些预定义的类，使我们的网站看起来漂亮且响应迅速。它类似于引导程序，因为它具有预定义的类供使用。它使用 CSS 和 jQuery 来构建界面。它有一些不同类型的元素可以帮助我们创建一个漂亮的网站。

Semantic-UI Modal 用于在屏幕上显示可以暂时阻止与主要内容交互的内容。我们可以在模式中包含任何类型的内容。在本文中，我们将讨论 Semantic-UI 中的 Modal。

语义 UI 模式类型：

• 模态：用于创建标准模态。
• 基本：用于创建基本模态。

语义 UI 模态内容：

• 标头：用于创建模态标头。
• 内容：这用于添加有关模态的信息。
• 图像内容：这用于创建带有图像的模式。
• 动作：这用于与模态交互。

语义 UI 模态变化：

• 全屏：用于创建全屏模式。
• 大小：这用于修改模态框的大小。我们可以有不同大小的模态，如小、普通或巨大。
• 滚动内容：这用于设置可以使用整个屏幕大小的模式。

语义 UI 模态状态：

• Active ：这用于创建具有活动状态的模态。

句法：

   ...

示例 1：以下代码演示了 Semantic-UI Modal Types 。

HTML

   Semantic UI Modal 
  
 
  
  
  
  

 

  
    
      GeeksforGeeks
    
    
      Semantic UI Modal
    
 
    
      
        Modal- Modal Type
      
 
      
        
        
          GeeksforGeeks
        
        
          A Computer Science portal for geeks.
          It contains well written, well thought
          and well explained computer science and
          programming articles
        
      
    
     
    
      
        Modal- Basic Type
      
      
        
          
          GeeksforGeeks
        
        
           

            Welcome to GeeksforGeeks. This is Basic modal.
          
  
        
        
          
            
            Close
          
        
      
    
  
 
  
    const modalType = () => {
        $('#modalType').modal('show');
      }
    const basicType = () => {
        $('#basicType').modal('show');
      }
  

 

输出：

语义 UI 模式类型

示例 2：以下代码演示了 Semantic-UI模态内容。

HTML

   Semantic UI Modal 
  
 
  
  
  
  

 

  
    
      GeeksforGeeks
    
    
      Semantic UI Modal
    
 
    
      
        Modal- Header Content
      
 
      
        
          This is Modal Header
        
      
    
 
    
      
        Modal- Content Content
      
      
        
           
 GeeksforGeeks Content 1
 
           
 GeeksforGeeks Content 2 
 
           
 GeeksforGeeks Content 3 
 
        
      
    
 
    
      
        Modal- Image Content
      
      
        
          
          
             
 GeeksforGeeks Image 
 
             
 GeeksforGeeks Image 
 
             
 GeeksforGeeks Image 
 
          
        
      
    
 
    
      
        Modal- Actions Content
      
      
        
          GeeksforGeeks
        
        
          
            
            Accepted
          
          
            
            Rejected
          
        
      
       
    
  
 
  
    const headerContent = () => {
        $('#headerContent').modal('show');
      }
    const contentContent = () => {
        $('#contentContent').modal('show');
      }
    const imageContent = () => {
        $('#imageContent').modal('show');
      }
 
    const actionContent = () => {
        $('#actionContent').modal('show');
      }
    $('#actionContent').modal({
      onApprove: function () {
        $('.textt').text('Accepted')
      },
      onDeny: function () {
        $('.textt').text('Rejected')
      },
    })
  

 

输出：

语义 UI 模态内容。

示例 3：以下代码演示了 Semantic-UI Modal Variations 。

HTML

   Semantic UI Modal 
  
 
  
  
  
  

 

  
    
      GeeksforGeeks
    
    
      Semantic UI Modal
    
 
    
      
        Modal- Full Screen Variation
      
 
      
        
          This is Full Screen Modal
        
        
           
 GeeksforGeeks Content 1
 
           
 GeeksforGeeks Content 2 
 
           
 GeeksforGeeks Content 3 
 
        
      
    
 
    
      
        
          Mini
        
        
          Tiny
        
        
          Small
        
        
          Large
        
       
 
      
        Modal- Size Variation
      
 
      
        
           
 GeeksforGeeks 1
 
           
 GeeksforGeeks 2 
 
           
 GeeksforGeeks 3 
 
        
      
    
 
    
      
        Modal- Scrolling Content Variation
      
 
      
        
          Scrolling Content Variation
        
        
           
 GFG 1 
 
           
 GFG 2 
 
           
 GFG 3 
 
           
 GFG 4 
 
           
 GFG 5 
 
           
 GFG 6 
 
           
 GFG 7 
 
           
 GFG 8 
 
           
 GFG 9 
 
           
 GFG 10 
 
           
 GFG 11 
 
           
 GFG 12 
 
           
 GFG 13 
 
           
 GFG 14 
 
           
 GFG 15 
 
           
 GFG 16 
 
           
 GFG 17 
 
           
 GFG 18 
 
           
 GFG 19 
 
           
 GFG 20 
 
        
      
    
  
 
  
    const fullVariation = () => {
        $('#fullVariation').modal('show');
    }
    const changeSize = (size) => {
      $('#sizeVariation')
        .removeClass('small')
        .removeClass('mini')
        .removeClass('tiny')
        .removeClass('large')
      $('#sizeVariation').addClass(size)
    }
    const sizeVariation = () => {
      $('#sizeVariation').modal('show')
    }
    const scrollVariation = () => {
      $('#scrollVariation').modal('show')
    }
  

 

输出：

语义 UI 模态变体

示例 4：以下代码演示了 Semantic-UI Modal States 。

HTML

   

  
  

 

  

    

      GeeksforGeeks
    
    

      Semantic UI Modal
    
 
    

      

        Modal- Active State
      
       
      

         

          GeeksforGeeks
        
 
         

          A Computer Science portal for geeks.
          It contains well-written, well thought
          and well-explained computer science and
          programming articles.
        
 
      
    
  

 

输出：

语义 UI 模态状态

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