CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mark Barrett
Mark Barrett

Reputation: 436

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.

Upvotes: 1

Views: 2892

Answers (3)

James Craig
James Craig

Reputation: 6854

You are applying that style to all bootstrap modals. What you should be doing is giving that modal an additional class to style is accordingly.

For example, you could name your modal with no faded background modal-with-no-background. This means you can get rid of the bad practice of overriding style declarations with !important.

.modal.no-fade + .modal-backdrop {
  opacity: 0;
}

Upvotes: 0

Mehmood
Mehmood

Reputation: 931

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.

Upvotes: 1

Mr.B
Mr.B

Reputation: 397

Are you using a external style sheet for the CSS? If so this would apply across the whole site.

It sounds as though you are looking for all modals to have the black background except the one page your looking for a different white background, is this correct?

if so you have a couple options,

You could create .modal-backdrop.fade.in.black & .modal-backdrop.fade.in.white and change the colour accordingly in the external CSS

Or you could have your standard .modal-backdrop.fade.in overwritten to black in external CSS & in the pages where you would like the background white, simply overwrite the same style in the individual page with a style tag.

Here are examples if you require: http://www.inmotionhosting.com/support/edu/website-design/using-css/linking-your-css-to-your-website

Upvotes: 0

Related Questions