CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-modal
Neil
Neil

Reputation: 5178

Bootstrap Modal's backdrop CSS on specific element

When a bootstrap model is opened up: the background gets shadier looking as shown here. I want to be able to apply a CSS class for that shading effect to a specific element.

I do not want any javascript involved because there is no behavior involved. I just want the styling.

I did attempt the solution shown in this question but it was not working for me.

Simply changing the opacity is not what I want. The opacity style just washes everything out while the bootstrap modal instead adds a shady tint to everything.

Upvotes: 0

Views: 912

Answers (1)

lhavCoder
lhavCoder

Reputation: 961

You can definitely do that for any element as well. You just need a div around the element with a semi transparent background. Heres a working fiddle : https://jsfiddle.net/fjhgtq0b/

Concept: The way i do this is, I always have a wrapper div around the element/elements around whom i want a shady background. I make the background of that div black (or any colour i want) with an opacity set on it. This would not make the element itself transparent.

html : (assuming my element is an input textbox)

<div id="backgroundDiv">
<input/>
</div>

css : 

#backgroundDiv{
position:relative;
background-color:rgba(0, 0, 0, 0.5);
}

i have a put a an image at the brackground so that you can see the shadiness of the background div. rgba (0,0,0,0.5) sets the backgrand to black (0,0,0 is the code for black) and the opacity is set to 0.5.

Upvotes: 1

Related Questions