bootstrap-modal-backdrop

Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more.

Check out Bootstrap Modal Backdrop Documentation for detailed instructions & even more examples.

Basic example

Default modal backdrop is a delicate shadow overlaying the rest of the page design.

``html


Launch demo modal

aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">

Modal title

...

Close

Save changes

`

Static Backdrop

If you would like to prevent the modal from closing on a click outside of the modal boundries, you can set the data-mdb-backdrop attribute to static.

`html


Launch demo modal

aria-hidden="true" data-mdb-backdrop="static" data-mdb-keyboard="true">

Modal title

...

Close

Save changes

`

No Backdrop

If you would like to get rid of the backdrop, you can set the data-mdb-backdrop attribute to false.

`html


Launch demo modal

aria-hidden="true" data-mdb-backdrop="false" data-mdb-keyboard="true">

Modal title

...

Close

Save changes

``

How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources



___

More extended Bootstrap documentation

• Bootstrap Address Form


• Bootstrap Avatar


• Bootstrap Back To Top Button


• Bootstrap Carousel Slider with Thumbnails


• Bootstrap Chat


• Bootstrap Code Blocks


• Bootstrap Comments


• Bootstrap Comparison Table


• Bootstrap Credit Card Form


• Bootstrap Drawer


• Bootstrap Nested Dropdown


• Bootstrap FAQ component / section


• Bootstrap Gallery


• Bootstrap Hamburger Menu


• Bootstrap Invoice


• Bootstrap Jumbotron


• Bootstrap Login Form


• Bootstrap Maps


• Bootstrap Media Object


• Bootstrap Mega Menu


• Bootstrap Multiselect


• Bootstrap News Feed


• Bootstrap Offcanvas


• Bootstrap Order Details


• Bootstrap Page Transitions


• Bootstrap Payment Forms


• Bootstrap Product Cards


• Bootstrap Profiles


• Bootstrap Quotes


• Bootstrap Registration Form


• Bootstrap Expanding Search Bar


• Bootstrap Shopping Carts


• Bootstrap Side Navbar


• Bootstrap Sidebar


• Bootstrap Social Media Icons & Buttons


• Bootstrap Square Buttons


• Bootstrap Survey Form


• Bootstrap Testimonial Slider


• Bootstrap Testimonials


• Bootstrap Textarea


• Bootstrap Timeline


• Bootstrap To Do List


• Bootstrap Video Carousel / Gallery


• Bootstrap Weather


• Bootstrap Dark Mode


• Bootstrap Padding


• Bootstrap Modal Methods


• Bootstrap Modal Size


• Bootstrap Card Deck


• Bootstrap Table Filter


• Bootstrap Slider


• Bootstrap Logo


• Bootstrap Popup


• Bootstrap Max Width


• Bootstrap Hero


• Bootstrap Select Dropdown


• Bootstrap Labels


• Bootstrap Dialog


• Bootstrap Screen Sizes


• Bootstrap Dropdown Button


• Bootstrap Widgets