布尔玛图像模式

Bulma是一个现代 CSS 框架，它提供了可以在我们的网站中使用的即用型前端组件。 Bulma Modal 是一个模态叠加层，可以包含您想要的任何内容。在本文中，我们将了解如何在 Bulma 中创建图像模态。

要创建图像模式，我们将在modal-content中使用img标签，并使用 JavaScript 通过切换模式组件上的is-active类来打开和关闭模式。

句法：

示例：以下示例说明了如何使用 Bulma 创建图像模式。

HTML

 
  
    
 
    
        .container {
            margin-top: 25px;
        }
    

 

    
      GeeksforGeeks
    Bulma Image Modal
    
        
            
                
                    
                        
                    
 
                
            
            
        
        
           Open the Modal
        
    
 
    
        // JavaScript code to open and close the modal
 
        // Function to open the modal
        function openModal() {
 
            // Add is-active class on the modal
            document.getElementById("modal1")
                .classList.add("is-active");
        }
 
        // Add event listeners to close the modal
        // whenever user click outside modal
        document.querySelectorAll(
'.modal-background, .modal-close,.modal-card-head .delete, .modal-card-foot .button'
                  ).forEach(($el) => {
            const $modal = $el.closest('.modal');
 
            $el.addEventListener('click', () => {
 
                // Remove the is-active class from the modal
                $modal.classList.remove("is-active");
            });
        });
    

输出：

布尔玛图像模态

参考： https://bulma.io/documentation/components/modal/#image-modal