Bootstrap: Modal background pitch black (no transparency) when customized

[PhilDulac]

Hi!

I just generated a customized version and the modal background is totally black (I also generated a version without any change to be sure it wasn't me that caused that):

The download link on the home page does have transparency:

[cvrebert]

Possibly related to #8723.

[esteveavi]

Hi,
I have seen that .fade class is in different order when using customized. In customized css .fade class is the last class while in original css is in the middle.
If you move the .fade class it solves the problem. So maybe a property is overwritten with .fade class.
Regards,
Esteve

[dannymcpherson]

For what its worth, I fixed the problem by changing this section:

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

...to this (added ".fade" between the two classes in the second definition):

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

[NinoD]

10093

error:
.fade.in {
opacity: 1;
}
is overriding
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}
in customized bootstrap.css
(bootstrap-master.zip / dist / css / bootstrap.css order is ok.)

solution:
change the order in which those classes show up when generating bootstrap.css

[bgunnink]

Is this going to be targeted for 3.0.1? Based on the number of dups, it seems to be a widespread problem.

[ssorallen]

The customizer orders the Less files according to the order of the inputs on the Customizer page, but it needs to follow the order in which they are included in bootstrap.less.

A fast fix for the Customizer would be to reorder the inputs to match bootstrap.less. Ideally though, it would parse boostrap.less during generation so it stays the canonical source for the order of including the Less files.

[ssorallen]

Or when the Less files are dumped to strings with Grunt, it could first read bootstrap.less and write the strings in the order in which they're included in that file. The ordering of the __less Array could then be significant, and the Customizer could just remove the elements it doesn't want and pass the remaining Array to the Less parser.

[jayeshkv]

tried using what @dannymcpherson suggested and it worked !

[cvrebert]

Closing in favor of #10779.

[interpro]

All you need is:

.in {
background: rgba(0, 0, 0, 0.8);
}

[florescelia]

Thanks Interpro your comment save my day, after hours trying to fix the bg

[HeavyMedl]

I solved this problem in my own customized implementation by moving _modals.scss below _component-animations.scss in app.scss i.e.

// app.scss
@import "vendor/bootstrap/component-animations";
@import "vendor/bootstrap/modals";

[ivanhub]

There is a real problem in bootstrap.css
using version 3.3.7,
without any customized code.
The problems appearing only in Internet Explorer (Edge).
And only after as example about every 5-7 times clicking to link of modal popup. And sometimes there is black background (modal-backdrop).
But Order is ok... Problem was solved only by adding

.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}

http://prntscr.com/edze0o

[bdalina54]

works with me

.show {
background: rgba(0, 0, 0, 0.22);
}

[samibirnbaum]

@ivanhub

Thanks your solution worked for me and i didn't have to edit any of bootstraps actual css code.

I just added this to my main.css file that i link to in my html below bootstraps css file!

Quick and easy solution! Thank you!!

[ivanhub]

Hi @samibirnbaum!
This code is not full done yet.
For remove blinking when modal is closed, you also need to add this line:
.modal-backdrop { background-color:transparent; transition: all .3s}

The full code will be:
.modal-backdrop.in { background: rgba(0, 0, 0, 0.5); } .modal-backdrop { background-color:transparent; transition: all .3s}

I've made video for bootstrap developers that show this strange glitch: http://sendvid.com/ufse50rm
ps. (sometimes as I said this black modal-backdrop appeared on the fifth-seventh click (not first as in the video)
Actually this bug is in the Edge Browser...

[srikanthbhadragiri]

I was able to solve the issue by moving the component to the top level of <div> in render() method.
I faced the problem when component was inside component.

render() { return( <div> <Modal show={this.state.showDetails} onHide={this.close}> <Modal.Header closeButton> …. </Modal.Header> </Modal> <Grid> <Row className="show-grid"> <Col xs={12} md={4} key={country.name}> <div> …

[hukumk]

DON'T WASTE YOUR TIME
just put this code it will fix your problem..
.modal {
background: rgba(0,0,0,0.5);
}

[Agung78]

There is a real problem in bootstrap.css
using version 3.3.7,
without any customized code.
The problems appearing only in Internet Explorer (Edge).
And only after as example about every 5-7 times clicking to link of modal popup. And sometimes there is black background (modal-backdrop).
But Order is ok... Problem was solved only by adding

.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}

http://prntscr.com/edze0o

thanks man you helped much thank you

[ShourjaCC]

If you're using react and bootstrap and wondering how to give a semi dark overlay when modal pops up please use this:
add this class to the starting div of modal component

.modal-backdrop.fade {
background-color: rgba(0, 0, 0, 0.8);
opacity: 1;
}