Bulma Modal JavaScript implementation Example

Last Updated : 22 Mar, 2022

Bulma is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

In this article, we will learn how to add JavaScript to implement the working of modal in Bulma. For using a modal component in Bulma, we have to create additional JavaScript code for implementing the modals as Bulma does not provide any JavaScript. We can use event handlers for triggering any button or call. For implementing JavaScript in Bulma Modal, there are 3 steps we have to follow:

Bulma Modal JavaScript Implementation classes:

The classes for creating a modal using JavaScript are the same as written in the pre-requisite Bulma Modal.

Create and add your HTML content into the modal: For creating a modal, add the below code at the last of your page i.e, before </body> tag.

HTML

<div class="modal" id="modal1">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">
                GeeksforGeeks
            </p>
 
 
 
            <button class="delete"
                aria-label="close">
            </button>
        </header>
        <section class="modal-card-body">
            <h1>Hey Geek!</h1>
             
 
<p>
                Learn all CS fundamentals, do 
                programming, participate in 
                contests, an many more.
            </p>
 
 
        </section>
        <footer class="modal-card-foot">
            <button class="button is-danger">
                Cancel
            </button>
        </footer>
    </div>
</div>

Create a button for triggering the HTML content: For creating a button that opens the modal card can be created by using the below code.

HTML

<button onclick="openModal();" class="button is-success">
   Open Modal 
</button>

Add JavaScript: Now to make the modal functional, just add the below code in a separate file or just add it to the last of the body before closing the body tag.

Javascript

<script>
   // 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();
             }
          });
</script>

Example: Below is the complete implementation of Bulma Modal using JavaScript.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
 
    <style>
        .container {
            margin-top: 25px;
        }
    </style>
</head>
 
<body class="has-text-centered content">
    <h1 class="title has-text-success">
        GeeksforGeeks
    </h1>
     
    <h2 class="subtitle">
        Bulma Modal JavaScript Implementation
    </h2>
 
    <!-- Modal HTML content(hidden by
         default) starts here -->
    <div class="container">
        <div class="modal" id="modal1">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">
                        GeeksforGeeks
                    </p>
 
 
 
                    <button class="delete"
                        aria-label="close">
                    </button>
                </header>
                <section class="modal-card-body">
                    <h1>Hey Geek!</h1>
                     
 
<p>
                        Learn all CS fundamentals, do
                        programming, participate in
                        contests, an many more.
                    </p>
 
 
                </section>
                <footer class="modal-card-foot">
                    <button class="button is-danger">
                        Cancel
                    </button>
                </footer>
            </div>
        </div>
 
        <!-- Modal button for trigger -->
        <button onclick="openModal();"
            class="button is-success">
            Open Modal
        </button>
    </div>
 
    <!-- JavaScript code implementation 
         for triggering the button -->
    <script>
        // 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();
            }
        });
    </script>
</body>
 
</html>