[javascript] 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("pageContent").style.opacity = "0.5";

}

This is working but whenever modal is closed opacity style still remains for the pageContent. But, I am sure this is not the right way to do. Any help appreciated. Thanks. Html button which opens Modal is

<button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()">Clear</button>

Modal Code is

 <div class="modal fade" id="modal-display">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">Search results</h4>
     </div>
    <div class="modal-body"> 
      <div class="container">
        <div class="row">
          <div class="col-md-5">Hello</div>
          <div class="col-md-5">i!!!!</div>
         </div>
      </div>
     </div>
  </div>
 </div>
</div>

EDIT:

modal-backdrop div

This question is related to javascript css twitter-bootstrap

The answer is


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.


you can set the opacity by the last parameter of rgb function.

the opacity is 0.5 in the example

.modal-backdrop {
    background-color: rgb(0, 0, 0, 0.5);
}

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/


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 });
})

It should work with:

.modal:before{
   opacity:0.001 !important;
}

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;
}

If you are using the less version to compile Bootstrap modify @modal-backdrop-opacity in your variables override file $modal-backdrop-opacity for scss.


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%;
}

After a day of struggling I figured out setting height :100% to .modal-backdrop.in class worked. height : 100% made opacity to show up whole page.


Adding !important to .modal-backdrop will ruin the transition on bootstrap modal

I achieved changing modal overlay background by direct edit in bootstrap.min.css. Those who are using bootstrap CSS locally (without using CDN) can change the background-color value of .modal-backdrop class.

If you want to change bootstrap 4 modal overlay opacity find this class .modal-backdrop.show and change opacity to the value you need.

If want to change overlay transition timing add transition to .modal-backdrop.fade class

If want to change transition timing for modal object change transition values in .modal.fade .modal-dialog class


You can download a custom compiled bootstrap 3, just customize the @modal-backdrop-opacity from:

https://getbootstrap.com/docs/3.4/customize/

Customizing bootstrap 4 requires compiling from source, overriding $modal-backdrop-bg as described in:

https://getbootstrap.com/docs/4.4/getting-started/theming/

In the answers to Bootstrap 4 custom build generator / download there is a NodeJS workflow for compiling Bootstrap 4 from source, alone with some non-official Bootstrap 4 customizers.


The problem with overriding using !important is that you will loose the fade in effect.

So the actual best trick to change the modal-backdrop opacity without breaking the fadeIn effect and without having to use the shameless !important is to use this :

.modal-backdrop{
  opacity:0; transition:opacity .2s;
}
.modal-backdrop.in{
  opacity:.7;
}

@sass

.modal-backdrop{
  opacity:0; transition:opacity .2s;
  &.in{opacity:.7;}
}

Simple and clean.


What worked for me, I clear the opacity in .modal.backdrop.in

.modal-backdrop.in{
    filter:alpha(opacity=50);
    opacity:.5
    }

change it to

.modal-backdrop.in{
   }

use this code

_x000D_
_x000D_
$("#your_modal_id").on("shown.bs.modal", function(){_x000D_
      $('.modal-backdrop.in').css('opacity', '0.9');_x000D_
});
_x000D_
_x000D_
_x000D_


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation