Open In App

Bulma Image Modal

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a modern CSS framework that provides ready-to-use frontend components which we can use in our websites. Bulma Modal is a modal overlay that can contain anything you want. In this article, we will see how to create an image modal in Bulma.

To create an image modal we will use an img tag inside modal-content and use JavaScript to open and close the modal by toggling the is-active class on the modal component.

Syntax:

<div class="modal">    
    <div class="modal-content">        
            <img src="...">        
    </div>    
</div>

Example: The below example illustrates how to create an image modal with Bulma.

HTML




<!DOCTYPE html>
<html>
 
<head>  
    <link rel='stylesheet'
          href=
 
    <style>
        .container {
            margin-top: 25px;
        }
    </style>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks</h1>
    <b>Bulma Image Modal</b>
    <div class="container">
        <div id="modal1" class="modal">
            <div class="modal-background"></div>
                <div class="modal-content">
                    <p class="image is-1by1">
                        <img src=
                            alt="GeeksforGeeks Logo">
                    </p>
 
                </div>
            <button class="modal-close is-large"
                    aria-label="close">
            </button>
        </div>
        <button onclick="openModal();"
                class="button is-primary">
           Open the Modal
        </button>
    </div>
 
    <script>
        // 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");
            });
        });
    </script>
</body>
</html>


Output:

Bulma Image modal

Reference: https://bulma.io/documentation/components/modal/#image-modal



Last Updated : 28 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads