引导模式打开时如何更改背景不透明度

Question

我正在使用引导模式。当模态打开时，背景内容的不透明度默认不会改变。我尝试使用

更改 js

function showModal() {
document.getElementById("pageContent").style.opacity = "0.5";

}

这是可行的，但只要模式关闭，pageContent 的不透明样式仍然存在。但是，我确信这不是正确的做法。任何帮助表示赞赏。谢谢。 打开 Modal 的 Html 按钮是

<button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()">Clear</button>

模态代码是

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

编辑：

Answer 1

我假设你想设置模态背景的不透明度......

通过 CSS 设置不透明度

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

!important

防止不透明度被覆盖 - 特别是在这种情况下来自 Bootstrap。

Answer 2

您可以在样式表中覆盖模态背景不透明度[注意 .in 类]

.modal-backdrop.in {
    opacity: 0.9;
}

http://jsfiddle.net/ThisIsMarkSantiago/r0gwn005/1/

Answer 3

你可以利用 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 });
})

Answer 4

以防万一有人在使用Bootstrap 4。看来我们不能再使用

.modal-backdrop.in

，但现在必须使用

.modal-backdrop.show

。保留淡入淡出效果。

.modal-backdrop.show {
    opacity: 0.7;
}

Answer 5

使用

!important

覆盖的问题是你会失去淡入淡出的效果。

所以改变模态背景不透明度而不破坏淡入效果和而不必使用无耻

!important

的实际最佳技巧是使用这个：

.modal-backdrop{
  opacity:0; transition:opacity .2s;
}
.modal-backdrop.in{
  opacity:.7;
}

@sass

.modal-backdrop{
  opacity:0; transition:opacity .2s;
  &.in{opacity:.7;}
}

简单干净。

Answer 6

如果你有一个高度超出浏览器高度的背景页面，仅仅将高度设置为 100% 将不是解决方案。

添加到 Bhargavi 的答案，这是当你在后台有可滚动页面时的解决方案。

.modal-backdrop.in
{
    opacity:0.5 !important;
    position:fixed;// This makes it cover the entire scrollable page, not just browser height
    height:100%;
}

Answer 7

使用此代码

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

Answer 8

使用 REACT Bootstrap 5 和打字稿。尝试了上面的许多方法，但都没有用。

终于得到它的工作

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

如果你想为一个特定的模式改变它，添加一个新的 backdropClassName 样式到组件

在 jsx 中：

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

在CSS中：

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

Answer 9

经过一天的努力，我发现设置 height :100% 到 .modal-backdrop.in class 有效。高度：100% 不透明度显示整个页面。

Answer 10

如果您使用 less 版本编译 Bootstrap，请在变量中修改 @modal-backdrop-opacity 覆盖文件 $modal-backdrop-opacity for scss。

Answer 11

添加 !important 到 .modal-backdrop 会破坏引导模式的过渡

我通过在bootstrap.min.css中直接编辑实现了改变模态叠加背景。那些在本地使用 bootstrap CSS（不使用 CDN）的人可以更改 .modal-backdrop 类的背景颜色值。

如果你想改变 bootstrap 4 modal overlay opacity 找到这个类 .modal-backdrop.show 并将不透明度更改为你需要的值。

如果要更改叠加过渡时间，请将过渡添加到 .modal-backdrop.fade 类

如果要更改 .modal.fade .modal-dialog 类中模态对象更改过渡值的过渡时间

Answer 12

您可以下载自定义编译的 bootstrap 3，只需自定义 @modal-backdrop-opacity 来自：

https://getbootstrap.com/docs/3.4/customize/

自定义 bootstrap 4 需要从源代码编译，覆盖 $modal-backdrop-bg，如中所述：

https://getbootstrap.com/docs/4.4/getting-started/theming/

在答案中 Bootstrap 4 自定义构建生成器/下载 有一个 NodeJS 工作流用于从源代码编译 Bootstrap 4，还有一些非官方的 Bootstrap 4 定制器。

Answer 13

对我有用的是，我清除了 .modal.backdrop.in 中的不透明度

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

改成

.modal-backdrop.in{
   }

Answer 14

您可以通过

rgb

函数的最后一个参数设置不透明度。

示例中的不透明度为

0.5

.modal-backdrop {
    background-color: rgb(0, 0, 0, 0.5);
}

Answer 15

它应该适用于：

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

Answer 16

在引导程序上 5

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