Modal Confusion

[bretonio]

This is a question about modals. Pardon redundancy but this discussion was a bit over my head.

Overview

This is about the Bulma CSS framework — I think.
This is about the Bulma docs to the extent I do not clearly understand the language about Javascript on this topic

Bulma is the latest version and I test on Chrome and Firefox mainly,

Description

When I append .is-active to the .modal wrapper the page reloads and the modal displays. But it does not respond to a click on the close buttons or the background.

My Pug looks like this.

                a.button.is-warning.is-large.modal-button(data-target='#modal') Diálogos de Socrates
                .modal
                    .modal-background
                    .modal-card
                        header.modal-card-head
                            p.modal-card-title Diálogo ao Gogo
                        
                            button.delete(aria-label='Afaste')
                        section.modal-card-body
                                    p No doming inermis definiebas per, est ne suscipit ponderum urbanitas. Has dicta labores consetetur in, fabulas epicuri evertitur quo no. Unum indoctum no cum. Ne vim posidonium definitiones. Quando rationibus nec et.

                        footer.modal-card-foot
                            button.button.is-success Guarde Mudanças
                            button.button Feche

I have checked my markup with a Pug compiler.

How have I barred the foo? Thank you.

[israelroldan]

You need to use javascript to add an event listener that will remove the is-active class from the .modal wrapper.

The concrete implementation depends what you're using on your project really, but there's an example with vanilla js: https://codepen.io/israelroldan/pen/ZJPRMB