布尔玛 |模态

Bulma 是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。

模态是一种经典的叠加层，其中可以包含任何内容。 Modal 组件是一个对话框/弹出窗口，一旦单击触发按钮，它就会显示在当前页面的顶部。 “模态”组件包括可以添加以设计内容的其他几个组件。下面列出了这些组件：

• modal-background：它是作为点击目标关闭模态的透明叠加层。
• modal-content：最大宽度为’640px’的容器。此容器显示模型类的内容。
• modal-close：它是位于右上角的“十字”，用于关闭模态。

示例 1：

html

  Bulma Modal
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 50px;
    }
  
    .modal-content {
      margin-top: 100px;
      width: 450px;
    }
  

  

  
    
      
        Click to see modal
        
          
          
  
            
              
                Geek for Geeks
              
                'GeeksforGeeks' is a computer 
                science portal.it was created with
                a goal in mind to provide well 
                written, well thought and
                well explained solutions for 
                selected questions. The core team
                of five super geeks constituting
                of technology lovers and
                computer science enthusiasts 
                have been constantly working
                in this direction .
              
              
                
                  Know more about GfG
                
              
            
          
          
            Model
          
        
      
    
  
  
  
    // Bulma does not have JavaScript included,
    // hence custom JavaScript has to be
    // written to open or close the modal
    const modal = 
          document.querySelector('.modal');
    const btn = 
          document.querySelector('#btn')
    const close = 
          document.querySelector('.modal-close')
  
    btn.addEventListener('click',
                         function () {
      modal.style.display = 'block'
    })
  
    close.addEventListener('click',
                           function () {
      modal.style.display = 'none'
    })
  
    window.addEventListener('click',
                            function (event) {
      if (event.target.className === 
          'modal-background') {
        modal.style.display = 'none'
      }
    })
  

输出：

示例 2：

登录表单模式。

html

  Bulma Modal
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 50px;
    }
  
    .modal-content {
      margin-top: 100px;
      width: 450px;
    }
  
    .buttons {
      margin-top: 12px;
    }
  

  

  
    
      
        
          
            Login form modal
          
        
        
          
          
            
              
                
                  Login
                
              
              
                
                  
                    Username
                  
                  
                    
                    
                      
                    
                  
                
  
                
                  
                    Password
                  
                  
                    
                    
                      
                    
                  
  
                  
                    
                      Login
                    
                  
                
              
            
          
          
            Model
          
        
      
    
  
  
  
    // Bulma does not have JavaScript included,
    // hence custom JavaScript has to be
    // written to open or close the modal
    const modal = document.querySelector('.modal');
    const btn = document.querySelector('#btn')
    const close = document.querySelector('.modal-close')
  
    btn.addEventListener('click',
                         function () {
      modal.style.display = 'block'
    })
  
    close.addEventListener('click',
                           function () {
      modal.style.display = 'none'
    })
  
    window.addEventListener('click',
                            function (event) {
      if (event.target.className ===
          'modal-background') {
        modal.style.display = 'none'
      }
    })
  

输出：

示例 3：

显示 Twitter 消息的模式。

html

  Bulma Modal
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 50px;
    }
  
    .modal-content {
      margin-top: 100px;
      width: 450px;
    }
  

  

  
    
      
        
          
            Twitter Messages
          
        
        
          
          
          
            
              
                
                  
                    
                  
                
                
                  
                    
                      GeekforGeeks 
                      @geekforgeeks
                      36m
                      
                      Hey, There!
                      
                      'GeeksforGeeks' is a computer science
                      portal.it was created with a goal in
                      mind to provide well written, well 
                      thought and well explained solutions
                      for selected questions. The core team
                      of five super geeks constituting of
                      technology lovers and computer science
                      enthusiasts have been constantly working
                      in this direction .
                    
                  
                  
                    
                      
                        
                          
                        
                      
                      
                        
                          
                        
                      
                      
                        
                          
                        
                      
                    
                  
                
              
            
          
          
            Model
          
        
      
    
  
  
  
    // Bulma does not have JavaScript included,
    // hence custom JavaScript has to be
    // written to open or close the modal
    const modal =
          document.querySelector('.modal');
    const btn =
          document.querySelector('#btn')
    const close =
          document.querySelector('.modal-close')
  
    btn.addEventListener('click',
                         function () {
      modal.style.display = 'block'
    })
  
    close.addEventListener('click',
                           function () {
      modal.style.display = 'none'
    })
  
    window.addEventListener('click',
                            function (event) {
      if (event.target.className ===
          'modal-background') {
        modal.style.display = 'none'
      }
    })
  

输出：