Modal

A classic modal overlay, in which you can include any content you want footballtabl.es is your free and mobile-friendly

1

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.io/images/placeholders/1280x960.png" alt="">
        </p>
      </div>
      <button class="modal-close is-large" aria-label="close"></button>
    </div>

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 #

Name
Type
Value
Computed Value
Computed Type 
$modal-z
string
40
$modal-background-background-color
compound
bulmaRgba($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
variable
$background
hsl(0, 0%, 96%)
color
$modal-card-head-border-bottom
size
1px solid $border
$modal-card-head-padding
size
20px
$modal-card-head-radius
variable
$radius-large
6px
size
$modal-card-title-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$modal-card-title-line-height
string
1
$modal-card-title-size
variable
$size-4
1.5rem
size
$modal-card-foot-radius
variable
$radius-large
6px
size
$modal-card-foot-border-top
size
1px solid $border
$modal-card-body-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$modal-card-body-padding
size
20px
$modal-breakpoint
variable
$tablet
769px
size

返回头部

23222

问题反馈
返回顶部