如何在启动模式打开时更改背景不透明度

Question

我正在使用bootstrap模态.当模态打开时,默认情况下不会更改背景内容不透明度.我尝试使用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

覆盖 using 的问题!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;}
}

简单干净。