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.
<!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=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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.
<!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=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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:
