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     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   lt button class  btn glossy-clear  data-toggle  modal  data-target   modal-display  onclick  showModal    gt Clear lt  button gt    Modal Code is     lt div class  modal fade  id  modal-display  gt      lt div class  modal-dialog  gt       lt div class  modal-content  gt        lt div class  modal-header  gt        lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt         lt h4 class  modal-title  gt Search results lt  h4 gt        lt  div gt       lt div class  modal-body  gt          lt div class  container  gt           lt div class  row  gt             lt div class  col-md-5  gt Hello lt  div gt             lt div class  col-md-5  gt i     lt  div gt            lt  div gt         lt  div gt        lt  div gt     lt  div gt    lt  div gt   lt  div gt    EDIT

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     amp  in opacity  7       Simple and clean

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

It should work with     modal before     opacity 0 001  important

[javascript] How to change background Opacity when bootstrap modal is open

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap