Bulma - Modal

Modal is a child window that is layered over its parent window. It display the content from a separate source that can have some interaction without leaving the parent window.
You can display the modal by using modal class along with below 3 modal classes −
modal-background − It displays the transparent overlay.
modal-background − It displays the transparent overlay.
modal-content − It includes the modal content in a horizontally and vertically centered container.
modal-content − It includes the modal content in a horizontally and vertically centered container.
modal-close − It is used to close the modal window.
modal-close − It is used to close the modal window.
The below example shows displaying of modal by using above classes in the page −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Simple Modal
            </span>
            <br>
            <br>
            
            <p>
               <a class = "button is-primary modal-button" data-target = "#modal">Launch example modal</a>
            </p>
            <div id = "modal" class = "modal">
               <div class = "modal-background"></div>
               <div class = "modal-content">
                  <div class = "box">
                     <article class = "media">
                        <div class = "media-left">
                           <figure class = "image is-64x64">
                              <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt="Image">
                           </figure>
                        </div>
                        <div class = "media-content">
                           <div class = "content">
                              <p>
                                 <strong>Will Smith</strong> 
                                 <small>@wsmith</small> 
                                 <small>31m</small>
                                 <br>
                                 This is simple text. This is simple text. 
                                 This is simple text. This is simple text.
                              </p>
                           </div>
                           <nav class = "level">
                              <div class = "level-left">
                                 <a class = "level-item">
                                    <span class = "icon is-small">
                                       <i class = "fa fa-reply"></i>
                                    </span>
                                 </a>
                                 <a class = "level-item">
                                    <span class = "icon is-small">
                                       <i class = "fa fa-retweet"></i>
                                    </span>
                                 </a>
                              </div>
                           </nav>
                           
                        </div>
                     </article>
                  </div>
               </div>
               <button class = "modal-close is-large" aria-label = "close"></button>
            </div>
         </div>
      </section>
      
      <script>
         $(".modal-button").click(function() {
            var target = $(this).data("target");
            $("html").addClass("is-clipped");
            $(target).addClass("is-active");
         });
         
         $(".modal-close").click(function() {
            $("html").removeClass("is-clipped");
            $(this).parent().removeClass("is-active");
         });
      </script>
      
   </body>
</html>
It displays the below output −

Launch example modal


Will Smith @wsmith 31m
This is simple text.This is simple text.This is simple text.This is simple text.
                              
Bulma allows you to display an image in the modal by adding image class along with path of image as shown in the below example −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Image Modal
            </span>
            <br>
            <br>
            
            <p>
               <a class = "button is-primary modal-button" data-target = "#modal">Launch image modal</a>
            </p>
            <div id = "modal" class = "modal">
               <div class = "modal-background"></div>
               <div class = "modal-content">
                  <p class = "image is-128x128">
                     <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt="">
                  </p>
               </div>
               <button class = "modal-close is-large" aria-label="close"></button>
            </div>
         </div>
      </section>
      
      <script>
         $(".modal-button").click(function() {
            var target = $(this).data("target");
            $("html").addClass("is-clipped");
            $(target).addClass("is-active");
         });
         
         $(".modal-close").click(function() {
            $("html").removeClass("is-clipped");
            $(this).parent().removeClass("is-active");
         });
      </script>
      
   </body>
</html>
It displays the below output −

Launch image modal




Bulma uses modal card to display the content in a box for better appearance.
Let's create an example for modal card by using the modal-card class −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Modal Card
            </span>
            <br>
            <br>
            
            <p>
               <a class = "button is-primary modal-button" data-target = "#modal">Launch Card modal</a>
            </p>
            
            <div id = "modal" class = "modal">
               <div class = "modal-background"></div>
               <div class = "modal-card">
                  <header class = "modal-card-head">
                     <p class = "modal-card-title">Modal Card</p>
                     <button class = "delete" aria-label = "close"></button>
                  </header>
                  
                  <section class = "modal-card-body">
                     <div class = "content">
                        <h1>Level One</h1>
                        <p>
                           This is simple text. This is simple text. 
                           This is simple text. This is simple text.
                        </p>
                        
                        <h2>Level Two</h2>
                        <p>
                           This is simple text. This is simple text. 
                           This is simple text. This is simple text.
                        </p>
                        
                        <h3>Level Three</h3>
                        <blockquote>
                           This is simple text. This is simple text. 
                           This is simple text. This is simple text.
                        </blockquote>
                        
                        <h4>Level Four</h4>
                        <p>
                           This is simple text. This is simple text. 
                           This is simple text. This is simple text.
                        </p>
                        
                        <h5>Level Five</h5>
                        <p>
                           This is simple text. This is simple text. 
                           This is simple text. This is simple text.
                        </p>
                        </ul>
                     </div>
                  </section>
                  
               </div>
            </div>
         </div>
      </section>
      
      <script>
         $(".modal-button").click(function() {
            var target = $(this).data("target");
            $("html").addClass("is-clipped");
            $(target).addClass("is-active");
         });
         
         $(".modal-close").click(function() {
            $("html").removeClass("is-clipped");
            $(this).parent().removeClass("is-active");
         });
      </script>

   </body>
</html>
It displays the below output −

Launch Card modal

Modal Card
This is simple text.This is simple text.This is simple text.This is simple text.
This is simple text.This is simple text.This is simple text.This is simple text.
This is simple text.This is simple text.This is simple text.This is simple text.
This is simple text.This is simple text.This is simple text.This is simple text.
 Print
 Add Notes
 Bookmark this page