How to change background Opacity when bootstrap modal is open

Question

I am using bootstrap modal. When modal is open background content opacity is not changed by default. I tried changing in js using

function showModal() {
doc         


        

Answer 1

Just setting height to 100% won't be the solution if you have a background page whose height extends beyond browser height.

Adding to Bhargavi's answer, this is the solution when you have scrollable page in the background.

.modal-backdrop.in
{
    opacity:0.5 !important;
    position:fixed;// This makes it cover the entire scrollable page, not just browser height
    height:100%;
}