html - 引导模式背景黑色

Question

当我打开模式时，背景变成黑色而不是不透明度为 0.5 或其他值。

我该怎么做才能解决这个问题？我使用 bootstrap 3.2

这里是一些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;
}

我在 .fade 中将不透明度更改为 0.5。它起作用了，但模态本身是透明的!

Answer 1

对于 bootstrap 版本 3，.fade.in 不透明度应设置为 1，当模式启动时，.modal-backdrop.in 应该设置为 .5 至少这是在 OOTB Bootstrap 上使用的代码。