Bulma Modal JavaScript implementation Example
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" > w3wiki </ 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" > w3wiki </ 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" > w3wiki </ 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 > |
Output:
Reference: https://bulma.io/documentation/components/modal/#javascript-implementation-example