Skip to content
Related Articles

Related Articles

Bulma Modal Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jul, 2022
View Discussion
Improve Article
Save Article

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The modal is a classic overlay in which one can include any content. The modal component is a dialog box/popup window that is displayed on top of the current page once the trigger button is clicked. The ‘modal’ component includes several other components that can be added to design the content. 

These components are listed below:

  • modal-background: It is the transparent overlay that acts as a click target to close the modal.
  • modal-content: It is the container with a maximum width of ‘640px’. This container shows the content of the modal class.
  • modal-close: It is the ‘cross’ located in the top right corner which is used to close the modal. 

Variable Used:

Name Description Type Value Computed Value Computed Type
$modal-z This variable is used to position the element at different levels. string 40    
$modal-background-background-color This variable is used to define the background color of the modal. compound bulmaRgba($scheme-invert, 0.86)    
$modal-content-width This variable is used to define the width of the content. size 640px    
$modal-content-margin-mobile This variable is used to define the margin of the content. size 20px    
$modal-content-spacing-mobile This variable is used to define the spacing of the content for mobile-sized variation. size 160px    
$modal-content-spacing-tablet This variable is used to define the spacing of the content for tablet-sized variation. size 40px    
$modal-close-dimensions  This variable is used to define the dimensions of the content. size 40px    
$modal-close-right This variable is used to provide a close-icon at the right position. size 20px    
$modal-close-top This variable is used to provide a close-icon at the top position. size 20px    
$modal-card-spacing This variable is used to provide spacing around the card. size 40px    
$modal-card-head-background-color This variable is used to provide background color to the card. variable $background hsl(0, 0%, 96%) color
$modal-card-head-border-bottom This variable is used to provide a border at the bottom of the card. size 1px solid $border    
$modal-card-head-padding  This variable is used to define padding around the card head of the modal. size 20px    
$modal-card-head-radius This variable is used to define the radius of the card head of the modal. variable $radius-large 6px size
$modal-card-title-color This variable is used to define the color of the title. variable $text-strong hsl(0, 0%, 21%) color
$modal-card-title-line-height This variable is used to define the line height of the title. string 1    
$modal-card-title-size This variable is used to define the size of the title. variable $size-4 1.5rem size
$modal-card-foot-radius  This variable is used to define the radius of the foot. variable $radius-large 6px size
$modal-card-foot-border-top This variable is used to define the border to the foot. size 1px solid $border    
$modal-card-body-background-color This variable is used to define the background color of the card. variable $scheme-main hsl(0, 0%, 100%) color
$modal-card-body-padding This variable is used to define padding around the card. size 20px    
$modal-breakpoint This variable is used to define the breakpoint of the modal. variable $tablet 769px size

Example 1: In the below code, we will make use of the above variable to modify the modal.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
    </script>    
</head>
  
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
          
        <div class='container'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-4'>
                    <div class='has-text-centered'>
                        <button class="button is-primary" id='btn'>
                            Login
                        </button>
                    </div>
                    <div class="modal">
                        <div class="modal-background"></div>
                        <div class="modal-content">
                            <div class="box">
                                <div>
                                    <h1 class='title has-text-centered'>
                                        Login
                                    </h1>
                                </div>
                                <form action='#' method='post'>
                                    <div class='field'>
                                        <label class='label' id='username'>
                                                Username:
                                        </label>
                                        <div class='control has-icons-left'>
                                            <input class='input' type='text' 
                                                   for='username' 
                                                   placeholder='Username'>
                                                <span class="icon is-small is-left">
                                                    <i class="fas fa-user"></i>
                                                </span>
                                        </div>
                                    </div>
                        
                                    <div class='field'>
                                        <label class='label' id='password'>
                                            Password:
                                        </label>
                                        <div class='control has-icons-left'>
                                            <input class='input' type='password'
                                                   for='password' 
                                                   placeholder='Password'>
                                            <span class="icon is-small is-left">
                                               <i class="fas fa-lock"></i>
                                            </span>
                                        </div><br>
                            
                                        <div class='buttons'>
                                            <button class='button is-link'>
                                              Login
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                       <button class="modal-close is-large" aria-label="close">
                         Modal
                      </button>
                    </div>
                </div>
            </div>
        </div>
            
        <script>
            
            //Bulma does not provide javaScript to close the model.
            const modal = document.querySelector('.modal');
            const btn = document.querySelector('#btn')
            const close = document.querySelector('.modal-close')
            
            btn.addEventListener('click', function () {
                modal.style.display = 'block'
            })
            
            close.addEventListener('click',function () {
                modal.style.display = 'none'
            })
            
            window.addEventListener('click',function (event) {
              if (event.target.className === 'modal-background') {
                modal.style.display = 'none'
              }
            })
        </script>
    </center>
</body>
</html>


SCSS Code:

$modal-background-background-color:grey;
.container {
   background-color:$modal-background-background-color;  
}

Compiled CSS Code:

.container {
   background-color: grey;
}

Output:

 

Example 2: In the below code, we will make use of the above variable to modify the modal.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
    </script>    
</head>
  
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>        
        <div class='container has-text-centered'>
            <div class='columns is-mobile is-centered'>
                <div class='column is-4'>
                    <button class="button is-primary" id='btn'>
                        Click to see modal
                    </button>
                    <div class="modal">
                        <div class="modal-content">                  
                            <div class='box'>
                                <h1 class='title' style='color:green'>
                                    Geek for Geeks
                                </h1>
                                <p class='is-family-monospace'>
                                    'GeeksforGeeks' is a computer 
                                    science portal.it was created with
                                    a goal in mind to provide well 
                                    written, well thought and
                                    well explained solutions for 
                                    selected questions. The core team
                                    of five super geeks constituting
                                    of technology lovers and
                                    computer science enthusiasts 
                                    have been constantly working
                                    in this direction .
                                </p>
  
                                <div class='buttons'>
                                    <button class='button is-fullwidth'>
                                      Know more about GfG
                                    </button>
                                </div>
                            </div> <!--end of box -->
                        </div> <!--end of modal content -->
                        <button class="modal-close is-large" aria-label="close">
                            Modal
                        </button>
                    </div> <!--end of modal -->
                </div><!--end of column is-4 -->
            </div>
        </div>
            
        <script>
            // Bulma does not have JavaScript included,
            // hence custom JavaScript has to be
            // written to open or close the modal
            const modal = document.querySelector('.modal');
            const btn = document.querySelector('#btn')
            const close = document.querySelector('.modal-close')
            
            btn.addEventListener('click', function () {
                modal.style.display = 'block'
            })
            
            close.addEventListener('click',function () {
                modal.style.display = 'none'
            })
            
            window.addEventListener('click',function (event) {
              if (event.target.className ===  'modal-background') {
                modal.style.display = 'none'
              }
            })
        </script>
    </center>
</body>
</html>


Output:

 

Reference: https://bulma.io/documentation/components/modal/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!