CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Rachid O
Rachid O

Reputation: 14002

bootstrap modal background black

when I open the modal the background turns black instead of having opacity to 0.5 or something.

what can i do to fix this ? I use bootstrap 3.2

here is some css:

.fade.in {
opacity: 1;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

I changed opacity to 0.5 in .fade.in it worked but the modal itself was trasparent !

Upvotes: 1

Views: 10599

Answers (1)

crazymatt
crazymatt

Reputation: 3286

For bootstrap version 3 the .fade.in opacity should be set to 1 and when the modal is initiated then .modal-backdrop.in should be set to .5 at least that's the code that is being used on OOTB bootstrap.

Upvotes: 5

Related Questions