Bulma 模态 JavaScript 实现示例

Bulma是 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性，最大限度地减少了对响应行为的媒体查询的使用。

在本文中，我们将学习如何在 Bulma 中添加 JavaScript 来实现 modal 的工作。为了在 Bulma 中使用模态组件，我们必须创建额外的 JavaScript 代码来实现模态，因为 Bulma 不提供任何 JavaScript。我们可以使用事件处理程序来触发任何按钮或调用。为了在 Bulma Modal 中实现 JavaScript，我们必须遵循 3 个步骤：

Bulma Modal JavaScript 实现类：

使用 JavaScript 创建模式的类与先决条件Bulma Modal中编写的类相同。

创建您的 HTML 内容并将其添加到模式中：要创建模式，请在页面的最后添加以下代码，即在 标记之前。

HTML

    

    

        

            

                GeeksforGeeks
            
 
 
 
            
            
        
        

            
Hey Geek!
             
 

                Learn all CS fundamentals, do
                programming, participate in
                contests, an many more.
            
 
 
        
        

            
                Cancel
            
        
    

创建一个用于触发 HTML 内容的按钮：要创建一个打开模态卡的按钮，可以使用以下代码创建。

HTML

   Open Modal

添加 JavaScript：现在要使模式功能正常，只需将以下代码添加到单独的文件中，或者在关闭 body 标记之前将其添加到正文的最后。

Javascript

   // Function to open the modal
   function openModal() {
    
     // Add is-active class on the modal
     document.getElementById("modal1").classList.add("is-active");
   }
    
   // Function to close the modal
   function closeModal() {
     document.getElementById("modal1").classList.remove("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");
           });
         });
          
         // Adding keyboard event listeners to close the modal
         document.addEventListener("keydown", (event) => {
         const e = event || window.event;
             if (e.keyCode === 27) {
              
              // Using escape key
               closeModal();
             }
          });

示例：下面是使用 JavaScript 的 Bulma Modal 的完整实现。

HTML

 

    
 
    
        .container {
            margin-top: 25px;
        }
    

 

    
        GeeksforGeeks
    
     
    
        Bulma Modal JavaScript Implementation
    
 
    
    
        
            
            
                
                    
                        GeeksforGeeks
                    
 
 
 
                    
                    
                
                
                    Hey Geek!
                     
 

                        Learn all CS fundamentals, do
                        programming, participate in
                        contests, an many more.
                    
 
 
                
                
                    
                        Cancel
                    
                
            
        
 
        
        
            Open Modal
        
    
 
    
    
        // Function to open the modal
        function openModal() {
            // Add is-active class on the modal
            document.getElementById("modal1")
                .classList.add("is-active");
        }
 
        // Function to close the modal
        function closeModal() {
            document.getElementById("modal1")
                .classList.remove("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");
            });
        });
 
        // Adding keyboard event listeners to close the modal
        document.addEventListener("keydown", (event) => {
            const e = event || window.event;
            if (e.keyCode === 27) {
 
                // Using escape key
                closeModal();
            }
        });
    

 

输出：

Bulma 模态 JavaScript 实现示例

参考： https://bulma.io/documentation/components/modal/#javascript-implementation-example