Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.
Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Route Planner and Route Optimizer

Modal

A classic modal overlay, in which you can include any content you want

The modal structure is very simple:

  • modal: the main container
    • modal-background: a transparent overlay that can act as a click target to close the modal
    • modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content
    • modal-close: a simple cross located in the top right corner

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

To activate the modal, just add the is-active modifier on the .modal container. You may also want to add is-clipped modifier to a containing element (usually html) to stop scroll overflow.

JavaScript implementation example
Bulma does not include any JavaScript. However, this documentation provides a JS implementation example that you are free to use.

Image modal #

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

Launch image modal 

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

Modal card #

If you want a more classic modal, with a head, a body and a foot, use the modal-card. 

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <div class="buttons">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </div>
    </footer>
  </div>
</div>

JavaScript implementation example #

The Bulma package does not come with any JavaScript. Here is however an implementation example, which sets the click handlers for custom elements, in vanilla JavaScript.

There are 3 parts to this implementation:

  • add the HTML for the modal (this modal is hidden by default)
  • add the HTML for a button to trigger the modal (you can style this button however you want)
  • add the JS code to add the click event on the trigger to open the modal

1. Add the HTML for the modal

At the end of your page, before the closing </body> tag, at the following HTML snippet:

<div id="modal-js-example" class="modal">
  <div class="modal-background"></div>

  <div class="modal-content">
    <div class="box">
      <p>Modal JS example</p>
      <!-- Your content -->
    </div>
  </div>

  <button class="modal-close is-large" aria-label="close"></button>
</div>

The id attribute's value must be unique.

2. Add the HTML for the trigger

Somewhere on your page, add the following HTML button:

<button class="js-modal-trigger" data-target="modal-js-example">
  Open JS example modal
</button>

You can style it however you want, as long as it has the js-modal-trigger CSS class and the appropriate data-target value. For example, you can add the button is-primary Bulma classes:

3. Add the JS for the trigger

In a script element (or in a separate .js file), add the following JS code:

document.addEventListener('DOMContentLoaded', () => {
  // Functions to open and close a modal
  function openModal($el) {
    $el.classList.add('is-active');
  }

  function closeModal($el) {
    $el.classList.remove('is-active');
  }

  function closeAllModals() {
    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
      closeModal($modal);
    });
  }

  // Add a click event on buttons to open a specific modal
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);

    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });

  // Add a click event on various child elements to close the parent modal
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
    const $target = $close.closest('.modal');

    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });

  // Add a keyboard event to close all modals
  document.addEventListener('keydown', (event) => {
    if(event.key === "Escape") {
      closeAllModals();
    }
  });
});

As long as you can toggle the is-active modifier class on the modal element, you can choose how you want to implement it.

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$modal-z
 
var(--bulma-modal-z)
 
40
 
$modal-background-background-color
 
var(--bulma-modal-background-background-color)
 
hsla(
  var(--bulma-scheme-h),
  var(--bulma-scheme-s),
  var(--bulma-scheme-invert-l),
  0.86
)
 
$modal-content-width
 
var(--bulma-modal-content-width)
 
40rem
 
$modal-content-margin-mobile
 
var(--bulma-modal-content-margin-mobile)
 
1.25rem
 
$modal-content-spacing-mobile
 
var(--bulma-modal-content-spacing-mobile)
 
10rem
 
$modal-content-spacing-tablet
 
var(--bulma-modal-content-spacing-tablet)
 
2.5rem
 
$modal-close-dimensions
 
var(--bulma-modal-close-dimensions)
 
2.5rem
 
$modal-close-right
 
var(--bulma-modal-close-right)
 
1.25rem
 
$modal-close-top
 
var(--bulma-modal-close-top)
 
1.25rem
 
$modal-card-spacing
 
var(--bulma-modal-card-spacing)
 
2.5rem
 
$modal-card-head-background-color
 
var(--bulma-modal-card-head-background-color)
 
var(--bulma-scheme-main)
 
$modal-card-head-padding
 
var(--bulma-modal-card-head-padding)
 
2rem
 
$modal-card-head-radius
 
var(--bulma-modal-card-head-radius)
 
var(--bulma-radius-large)
 
$modal-card-title-color
 
var(--bulma-modal-card-title-color)
 
var(--bulma-text-strong)
 
$modal-card-title-line-height
 
var(--bulma-modal-card-title-line-height)
 
1
 
$modal-card-title-size
 
var(--bulma-modal-card-title-size)
 
var(--bulma-size-4)
 
$modal-card-foot-background-color
 
var(--bulma-modal-card-foot-background-color)
 
var(--bulma-scheme-main-bis)
 
$modal-card-foot-radius
 
var(--bulma-modal-card-foot-radius)
 
var(--bulma-radius-large)
 
$modal-card-body-background-color
 
var(--bulma-modal-card-body-background-color)
 
var(--bulma-scheme-main)
 
$modal-card-body-padding
 
var(--bulma-modal-card-body-padding)
 
2rem

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free