Bootstrap Modal Hidden Behind Backdrop

If you are reading this post, probably your bootstrap modal looks like this screenshot above and you are searching for a fix.

First, why does this behavior occur?

The most common reason is that the modal container has a fixed or relative position or it is within an element with fixed or relative position.

Case

Let’s take a look at our theme, Asher. This Bootstrap template has a fixed header. A modal placed randomly will most certainly replicate the wrong behavior of the modal shown above.

The fix

The easiest way is to move the modal div outside the elements with special positioning. In our case (Asher theme), we’ll add it before the body tag:

Then place your modal button where you want it to appear in the theme:

That’s it! Has this fix been useful to you? Please, leave your comment or share.

HTML Tutorials Tutorials

Let's stay in touch, please! We'll send you stories similar to "Bootstrap modal hidden behind the backdrop" if you join our newsletter. It's free and you can unsubscribe at anytime!

You may also like:

Comments

WowThemesNet membership

We create themes & templates
Take a look at our
newest themes

wow thems Join our free newsletter

Let's keep in touch! Get new themes, updates, discounts and important news for your website straight to your inbox. You can unsubscribe at anytime!

Yes, I'd like to hear about your products and news. Privacy Policy