--- title: Modal layout: documentation doc-tab: components doc-subtab: modal --- {% capture modal %} {% endcapture %} {% capture image_modal %} {% endcapture %} {% capture modal_card %} {% endcapture %} {% include subnav/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 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

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 type='component' %}