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

user_669886 0
Viewed 8111

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?

bulma modal-dialog css javascript
4 Answers

The easiest thing to do is not use their "built-in" background and just set a background color for the first modal div. I got around it in my React app by doing this: 

<div style={{ backgroundColor : 'rgba(0,0,0,0.86)'}} id="modal-image-detail" className="modal modal-fx-superScaled">

and then I deleted the className="modal-background" from the second div

user_5384580
Related