Semantic-UI 模态大小变化

语义用户界面 开源框架提供图标或字形，用于显示与使用 CSS 和 jQuery 的某些元素相关的图片，用于创建出色的用户界面。它是一个用于创建漂亮和响应式布局的开发框架。

Semantic UI Modal 在屏幕上方显示暂时阻止与网站主视图交互的内容。我们需要根据 modal 提供的细节执行一个动作。

语义 UI 模态大小变化用于修改模态的大小。我们可以有不同大小的模态，如小、普通或巨大。

语义 UI 模态大小变化类：

• mini ：添加这个类，模态将是 mini 大小。
• tiny ：添加此类，模态框的大小将非常小。
• small ：添加这个类，模态框的尺寸会很小。
• large ：添加这个类，模态框的尺寸会很大。

语法：将所需大小从上述类添加到模态容器，如下所示：

    ....

启动模态：

$('.ui.large.modal').modal('show')

示例：在下面的示例中，我们有一组按钮来更改模态框的大小，然后我们可以看到不同大小的模态框。

HTML

  
    Semantic-UI Modal Size Variation
    
    
    
    
    
    
    
    
    
      .icon {
        margin: 16px;
      }
    
  
  
  
    
      
        
           GeeksforGeeks 
        
         Semantic UI Modal Size Variation 
      
  
      
        Welcome to GeeksforGeeks
        Find the best programming tutorials here.
  
        
          
            Mini
          
          
            Tiny
          
          
            Small
          
          
            Large
          
        
        
        
          Open Modal
        
        
          
            Welcome to GeeksforGeeks
          
  
          
            
              Data Structures
              Algorithms
              Machine Learning
            
          
          
            
              
              Close
            
          
        
      
    
    
      const changeSize = (size) => {
        $('#gfgmodal')
          .removeClass('small')
          .removeClass('mini')
          .removeClass('tiny')
          .removeClass('large')
        $('#gfgmodal').addClass(size)
      }
      const openModal = () => {
        $('#gfgmodal').modal('show')
      }
    
  

输出：

Semantic-UI 模态大小变化

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