--- title: Modal layout: documentation doc-tab: components doc-subtab: modal breadcrumb: - home - documentation - components - components-modal meta: colors: false sizes: false variables: true --- {% capture modal %}
{% endcapture %} {% capture image_modal %}

{% endcapture %} {% capture modal_card %}

Modal title

{% endcapture %} {% capture modal_js_html %} {% endcapture %} {% capture modal_js_trigger %} {% endcapture %} {% capture modal_js_trigger_bulma %} {% endcapture %} {% capture modal_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(e.key === "Escape") { closeAllModals(); } }); }); {% endcapture %}

The modal structure is very simple:

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

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.
{% include elements/anchor.html name="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 %} {% include elements/anchor.html name="Modal card" %}

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

{% highlight html %}{{ modal_card }}{% endhighlight %}
{% include elements/anchor.html name="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:

1. Add the HTML for the modal

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

{% highlight html %}{{ modal_js_html }}{% endhighlight %}

The id attribute's value must be unique.

2. Add the HTML for the trigger

Somewhere on your page, add the following HTML button:

{{ modal_js_trigger }}
{% highlight html %}{{ modal_js_trigger }}{% endhighlight %}

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:

{{ modal_js_trigger_bulma }}

3. Add the JS for the trigger

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

{% highlight javascript %}{{ modal_js_code }}{% endhighlight %}

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

{% include components/variables.html type='component' %} {{ modal_js_html }}