How To Change Background Opacity When Bootstrap Modal Is Open

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() { document.getElementById('p

Solution 1:

I am assuming you want to set the opacity of the modal background...

Set the opacity via CSS

.modal-backdrop
{
    opacity:0.5!important;
}

!important prevents the opacity from being overwritten - particularly from Bootstrap in this context.

Solution 2:

You can override the modal-backdrop opacity in your stylesheet [take note of the .in class]

.modal-backdrop.in {
    opacity: 0.9;
}

http://jsfiddle.net/ThisIsMarkSantiago/r0gwn005/1/

Solution 3:

you could utilize bootstrap events:: as

//when modal opens
$('#yourModal').on('shown.bs.modal', function (e) {
  $("#pageContent").css({ opacity: 0.5 });
})

//when modal closes
$('#yourModal').on('hidden.bs.modal', function (e) {
  $("#pageContent").css({ opacity: 1 });
})

Solution 4:

Just in case someone is using Bootstrap 4. It seems we can no longer use .modal-backdrop.in, but must now use .modal-backdrop.show. Fade effect preserved.

.modal-backdrop.show {
    opacity: 0.7;
}

Solution 5:

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 heightheight:100%;
}