如何更改背景在启动模式打开时的不透明度 [英] How to change background Opacity when bootstrap modal is open

问题描述

我使用bootstrap modal。当模态是开放背景内容不透明度默认情况下不更改。我尝试使用

I am using bootstrap modal. When modal is open background content opacity is not changed by default. I tried changing in js using

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

}

模态是关闭的不透明样式仍然为pageContent。但是，我相信这不是正确的方法。任何帮助赞赏。谢谢。
打开Modal的Html按钮是

This is working but whenever modal is closed opacity style still remains for the pageContent. But, I am sure this is not the right way to do. Any help appreciated. Thanks. Html button which opens Modal is

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

编辑：

推荐答案

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

I am assuming you want to set the opacity of the modal background...

通过CSS设置不透明度

Set the opacity via CSS

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

！important 不透明度被覆盖 - 特别是在此上下文中的Bootstrap。

!important prevents the opacity from being overwritten - particularly from Bootstrap in this context.

这篇关于如何更改背景在启动模式打开时的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！