Blog

Bulma – Modal

Bulma modal

In this guide, we will discuss Modal in Bulma.

Description

Modal is a child window that is layered over its parent window. It displays 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-content − It includes the modal content in a horizontally and vertically centered container.
  • 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://adglob.in/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>

Image Modal

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://adglob.in/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>

Modal Card

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>

Next Topic : Click Here

This Post Has 3 Comments

Leave a Reply