Modal

since 0.1.0

Data API No

Javascript API Yes

Bulma provides a very versatile modal component. The problem? Modals need Javascript! BulmaJS makes this quick and easy to set up.

To start you’ll need to create your modal and the element that will show/hide the modal. In this example, we’ll use a button.

You then need to set up the event listeners for your button. For example, below we link up our button to open the modal and the two buttons within the modal to close it.

    let modal = Bulma.create('modal', {element: document.querySelector('#example-modal')});
    let btn = document.querySelector('#example-modal-button');
    let visible = false;
    let closeButtons = document.querySelectorAll('.button-close');

    btn.addEventListener('click', function() {
        if(visible) {
            modal.close();
        } else {
            modal.open();
        }

        visible = !visible;
    });

    for(let i = 0; i < closeButtons.length; i++) {
        closeButtons[i].addEventListener('click', function() {
            modal.close();
            visible = !visible;
        });
    }