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

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

你可以利用引导事件::作为

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

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

Answer 8

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

Answer 9

使用此代码

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

Answer 10

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

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

如果您想更改 bootstrap 4 modal 覆盖不透明度，请找到此类.modal-backdrop.show并将不透明度更改为您需要的值。

如果想改变叠加过渡时间添加过渡到.modal-backdrop.fade类

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

Answer 11

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

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

将其更改为

.modal-backdrop.in{
   }

Answer 12

您可以通过rgb函数的最后一个参数设置不透明度。

示例中的不透明度为0.5

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

Answer 13

您可以下载自定义编译的引导程序 3，只需从以下位置自定义 @modal-backdrop-opacity：

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

自定义引导程序 4 需要从源代码编译，覆盖 $modal-backdrop-bg，如下所述：

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

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

Answer 14

它应该与：

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

Answer 15

使用 REACT Bootstrap 5 和打字稿。 尝试了以上许多方法，但没有奏效。

终于得到它的工作

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

如果您想为一个特定的模式更改它，请向组件添加一个新的背景类名称样式

在 jsx 中：

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

在 CSS 中：

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