--- layout: documentation doc-tab: components doc-subtab: modal variables: - name: $modal-z value: 20 - name: $modal-background-background-color value: rgba($black, 0.86) - name: $modal-content-width value: 640px - name: $modal-content-margin-mobile value: 20px - name: $modal-content-spacing-mobile value: 160px - name: $modal-content-spacing-tablet value: 40px - name: $modal-close-dimensions value: 40px - name: $modal-close-right value: 20px - name: $modal-close-top value: 20px - name: $modal-card-spacing value: 40px - name: $modal-card-head-background-color value: $background - name: $modal-card-head-border-bottom value: 1px solid $border - name: $modal-card-head-padding value: 20px - name: $modal-card-head-radius value: $radius-large - name: $modal-card-title-color value: $text-strong - name: $modal-card-title-line-height value: 1 - name: $modal-card-title-size value: $size-4 - name: $modal-card-foot-radius value: $radius-large - name: $modal-card-foot-border-top value: 1px solid $border - name: $modal-card-body-background-color value: $white - name: $modal-card-body-padding value: 20px --- {% capture modal %} {% endcapture %} {% capture image_modal %} {% endcapture %} {% capture modal_card %} {% endcapture %} {% include subnav-components.html %}

Modal

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

{% include meta.html colors=false sizes=false variables=true %}

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 verticaly 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

Launch example modal

{% highlight html %}{{ modal }}{% endhighlight %}

To activate the modal, just add the is-active modifier on the .modal container

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

{% highlight html %}{{ image_modal }}{% endhighlight %}

Modal card

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

Launch modal card

{% highlight html %}{{ modal_card }}{% endhighlight %}
{% include variables.html %}