How can I prevent a modal (using the Bulma CSS framework) from closing if the user clicks outside of it?

Question

Bulma is a pure CSS framework and does not provide JavaScript. That being said, how would I go about adding JavaScript to prevent the modal component (specifically the card variant) from being closed if a user clicks outside of the modal or preventing it from closing if they hit `ESC` on their keyboard?

Accepted Answer

In the example, they probably coded that behaviour. Bulma does not include it. To activate the modal, just add the is-active modifier on the .modal container. As long as you don't remove the is-active modifier yourself, the modal will stay open.

How can I prevent a modal (using the Bulma CSS framework) from closing if the user clicks outside of it?

Solution

Problem