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

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

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

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

}

}

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

这是有效的，但是当模式关闭时，pageContent仍然保留不透明度样式。但是，我肯定这不是正确的做法。任何帮助表示赞赏。谢谢。打开模态的Html按钮是

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

Modal Code is

模态代码

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

EDIT:

编辑:

9 个解决方案

#1

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

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

Set the opacity via CSS

通过CSS设置不透明度

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

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

!重要的是防止不透明度被覆盖-特别是在这种情况下的引导。

#2

You can override the modal-backdrop opacity in your stylesheet [take note of the .in class]

您可以在样式表中覆盖模式背景的不透明度[注意，在课堂上]

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

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

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

#3

you could utilize bootstrap events:: as

您可以使用bootstrap事件::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 });
})

#4

The problem with overriding using !important is that you will loose the fade in effect.

重写使用的问题!重要的是您将在效果中释放渐变。

So the actual best trick to change the modal-backdrop opacity without breaking the fadeIn effect and without having to use the shameless !important is to use this :

因此，要想在不破坏fadeIn效果的前提下改变模式背景的不透明度，同时又不需要使用无耻的手段，最好的办法就是:

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

@sass

@sass

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

Simple and clean.

简单而干净。

#5

After a day of struggling I figured out setting height :100% to .modal-backdrop.in class worked. height : 100% made opacity to show up whole page.

经过一天的挣扎，我算出了设置高度:100%到。modal背景。在课堂上工作。高度:100%的不透明度显示整个页面。

#6

Just setting height to 100% won't be the solution if you have a background page whose height extends beyond browser height.

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

Adding to Bhargavi's answer, this is the solution when you have scrollable page in the background.

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

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

#7

If you are using the less version to compile Bootstrap modify @modal-backdrop-opacity in your variables override file $modal-backdrop-opacity for scss.

如果您正在使用较少的版本编译引导修改变量中的@modal-backdrop-透明度文件$modal-backdrop-透明度scss。

#8

Just in case someone is using Bootstrap 4. It seems we can no longer use .modal-backdrop.in, but must now use .modal-backdrop.show. Fade effect preserved.

以防有人使用Bootstrap 4。看起来我们不能再使用。modal- background了。在，但现在必须使用。modal-backdrop.show。保存褪色效果。

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

#9

use this code

使用这个代码

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