javascript - Bootstrap 模式打开时如何更改背景不透明度

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。