Modal

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

Colors No
Sizes No
Variables Yes

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.

No JavaScript
Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself.

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.zcopy.site/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">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

名字 类型 默认值 计算值
名字 类型 默认值 计算值
$modal-z string 40
$modal-background-background-color color rgba($scheme-invert, 0.86)
$modal-content-width size 640px
$modal-content-margin-mobile size 20px
$modal-content-spacing-mobile size 160px
$modal-content-spacing-tablet size 40px
$modal-close-dimensions size 40px
$modal-close-right size 20px
$modal-close-top size 20px
$modal-card-spacing size 40px
$modal-card-head-background-color color $background hsl(0, 0%, 96%)
$modal-card-head-border-bottom size 1px solid $border
$modal-card-head-padding size 20px
$modal-card-head-radius size $radius-large 6px
$modal-card-title-color color $text-strong hsl(0, 0%, 21%)
$modal-card-title-line-height string 1
$modal-card-title-size size $size-4 1.5rem
$modal-card-foot-radius size $radius-large 6px
$modal-card-foot-border-top size 1px solid $border
$modal-card-body-background-color color $scheme-main hsl(0, 0%, 100%)
$modal-card-body-padding size 20px