Modals - Ability to Prevent Close on Click of Backdrop


Topic: Modals - Ability to Prevent Close on Click of Backdrop

Elliot pro asked 3 years ago

Right now if I click anywhere outside the modal it will close the modal. It would be nice if we had the ability to prevent close on click outside and require user to click the close button.


Just add this attribute to your modal data-backdrop="false"

When you want to add a background, add your own class with the appropriate color to the modal.


yatender rawat commented 2 months ago

your solution didn't work bro

Grzegorz Bujański staff commented 2 months ago


Working good for me. Look here:

Best, Grzegorz

Mighty answered a year ago

Please how do i solve this same issue in vue js? How do i add the attribute data-backdrop="false" to my modal? I am using the mdb plugin. Please I am new to vue js.

Jakub Strebeyko staff commented a year ago

Hi there @Mighty,

As I had a chance to explain elsewhere, what you are looking for is the removeBackdrop prop on the modal component. Please refer to official docs (API section) for all the the other possible built-in modal options.

We also do have a Vue dedicated part of the Support Board where you can find solutions to the most common issues.

With Best Regards,Kuba

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No