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

javascript css modal-dialog bulma
Ryan Mortier picture Ryan Mortier · May 11, 2017 · Viewed 7.3k times · Source

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?

Answer

Daniel Reinoso picture Daniel Reinoso · May 16, 2017

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.

Related questions

Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this …

Read More
Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable. Here's what …

Read More
How to jump to top of browser page

I'm writing a modal popup and I need the browser to jump to the top of the screen when the open modal button is pressed. Is there a way to scroll the browser to the top using jQuery?

Read More