Mark Barrett Mark Barrett - 1 month ago 13
HTML Question

Separate background fade on Bootstrap Modal

I have a website that uses Bootstrap Modals quite a bit. They worked in their normal fashion with a black faded background that would blur out the content that was on the page.

I then needed a modal that opened when a page was loaded so I used:

<div class="modal-backdrop fade in" id="purchaseModal" tabindex="-1" role="dialog">


Originally this was really transparent, so I found an answer on here that said I had to overwrite the styles using:

.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}


It worked pretty well and stopped the modal from being transparent and instead made the background white. This is fine.

However when I go back to any of the other modals on my site they no longer have the black fade that they used to, and it is now completely transparent. I'm not sure if maybe I overwrote the wrong thing, or do I need to perhaps write another class for the second modal that I need.

Answer

Try to override class with its ID or ClassName.

#purchaseModal.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}

It will only work/override with purchaseModal id, and other will remain same with their default styles.

Hope this helps you.

Comments