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

<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

Thanks for the answers.I tried all but still not working. I figured out in developer tools modal-backdrop div added outside the form tag when modal is open, I am not sure if this is the cause. Added image to the question. — Bhargavi, Jan 23 '15 at 15:34

score 139 · Accepted Answer · edited Mar 30 '16 at 03:16

139

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.

edited Mar 30 '16 at 03:16

Danny Mahoney

1,255
2
13
24

answered Jan 22 '15 at 18:46

Hemant

1,999
2
12
8

If I do that even modal is transparent when open. But you reminded me of adding modal-backdrop class to the modal div. After this now background is black instead of transparent. – Bhargavi Jan 22 '15 at 19:57
3

Dont add modal-backdrop to the modal div. The modal-background is the class that bootstrap uses for background on which modal appears. You just need to add this CSS to the page, that's it – Hemant Jan 23 '15 at 03:24
3

I'm using Bootstrap 3 and adding !important messes up the opacity transition. This answer works great if you just take the important off. Here is what I did: .modal-backdrop, .modal-backdrop.fade.in { opacity: .5 or whatever you want; } – dave4jr Nov 29 '16 at 02:33
Thanks for the solution. We're using this for a landing page where we're "gating" the content. I removed the "Close" x button and am trying to figure out how to make the modal-background non-clickable. Visitors are required to complete the form before viewing content. Let me know if anyone knows a good way to do this. – user3120861 Oct 27 '17 at 21:04
UPDATE to the above comment: I applied the following to the modal div to prevent clicking outside-the-modal clicking and closing.: data-keyboard="false" data-backdrop="static" – user3120861 Oct 27 '17 at 21:46

Mark Santiago · Answer 2 · 2016-12-01T07:23:36.010

28

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/

edited Dec 01 '16 at 07:23

answered Jan 23 '15 at 06:26

Mark Santiago

453
3
9

1

Better answer, this solution keeps the fade transition – Mike Gerard Feb 22 '21 at 08:22

score 14 · Answer 3 · answered Jan 23 '15 at 06:34

14

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

answered Jan 23 '15 at 06:34

Sudhir Bastakoti

99,167
15
158
162

2

This method worked good for me aswell, I used a different select for the backdrop though, not sure about the #pageContent bit. This code was used to remove the Darkening Effect. ` $("#busy-modal").on('shown.bs.modal',function(e){ $('div.modal-backdrop').css('opacity',0); }); $("#busy-modal").on('hidden.bs.modal',function(e){ $('div.modal-backdrop').css('opacity',0.5); }); ` – Clive Paterson Jun 27 '16 at 07:46

score 11 · Answer 4 · answered Dec 11 '17 at 18:32

11

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

answered Dec 11 '17 at 18:32

barfuin

16,865
10
85
132

score 4 · Answer 5 · 2018-06-28T11:24:46.670

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.

score 3 · Answer 6 · answered Jul 18 '15 at 19:48

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

score 3 · Answer 7 · answered Dec 08 '21 at 20:08

Using REACT Bootstrap 5 and typescript. Tried many of the above and none work.

Finally got it work with

.fade.modal-backdrop.show{
 opacity: 0.8;
}

if you want to change it for one specific modal, add a new backdropClassName style to the component

in jsx:

<Modal show={this.show} backdropClassName="newBackdrop" ...>

in css:

.fade.modal-backdrop.newBackdrop.show{
 opacity: 0.8;
}

score 2 · Answer 8 · answered Aug 23 '17 at 23:16

2

use this code

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

answered Aug 23 '17 at 23:16

Vitalya Litvinov

21
1

1

exactly what I was looking for. This enables a stronger fade a only one of the modal instances instead of affecting the others, thank you. – gstlouis Jan 31 '20 at 16:45

score 1 · Answer 9 · answered Jan 23 '15 at 21:57

1

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.

answered Jan 23 '15 at 21:57

Bhargavi

737
1
7
15

1

But what if you have the page as scrollable? This would not cover the whole page then – SoulRayder Jul 18 '15 at 19:42

score 1 · Answer 10 · answered Oct 02 '15 at 14:47

1

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

answered Oct 02 '15 at 14:47

Jonathan Cohlmeyer

29
2

Shahas Nizar · Answer 11 · 2018-10-30T14:59:14.037

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

provide an example to increase understanding and get more likes — Alexey Nikonov, Oct 17 '19 at 11:44

score 1 · Answer 12 · answered May 03 '20 at 06:53

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.

score 1 · Answer 13 · answered Jun 22 '23 at 18:13

1

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

This works fine for me.

answered Jun 22 '23 at 18:13

Md Rayhanur Rashid

11
1

You can get rid of the `!important` if you make the rule more specific: `.modal-backdrop.show` or `div.modal-backdrop.show` does the trick. – EzPizza Aug 02 '23 at 13:01

Deepali · Answer 14 · 2018-09-28T20:04:14.643

0

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

edited Sep 28 '18 at 20:04

answered Sep 28 '18 at 19:18

Deepali

97
1
5

score 0 · Answer 15 · answered Apr 14 '20 at 07:07

0

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

answered Apr 14 '20 at 07:07

Abdullah Gürsu

3,010
2
17
12

score 0 · Answer 16 · answered May 18 '20 at 16:22

0

It should work with:

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

answered May 18 '20 at 16:22

Nensi601

116
6

score 0 · Answer 17 · answered Mar 28 '23 at 21:59

0

on bootstrap 5

    <Modal
      ...
      backdropClassName="opacity-100" // it can be 0, 25, 75, 100
    >

answered Mar 28 '23 at 21:59

Behzad

1,740
1
22
49

Please explain how your code solved OP's problem – Rojo Mar 30 '23 at 13:13

score 0 · Answer 18 · answered Sep 02 '23 at 14:56

0

Update for Bootstrap 5.3, You just need to adjust the body tag and add it to css selector to reach the .modal-backdop class. just like this.

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

answered Sep 02 '23 at 14:56

luthfinzo

11
3

How to change background Opacity when bootstrap modal is open

18 Answers18

Linked