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

我正在使用引导模式。当模式为“打开”时，默认情况下不会更改背景内容的不透明度。我试着在js中使用

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

}

这是可行的，但无论何时关闭模式，页面内容仍保留不透明度样式。但是，我相信这不是正确的做法。谢谢你的帮助。谢谢 打开模态的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>

&时代；
搜索结果
你好
我

编辑：

---

我假设您想要设置模式背景的不透明度

通过CSS设置不透明度

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

---

！重要信息

防止不透明度被覆盖-特别是在这种情况下，从引导中。

您可以覆盖样式表中的模式背景不透明度[注意.in类]

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

---

您可以使用bootstrap:：as

---

经过一天的努力，我计算出了设置高度：100%到。模态背景。在课堂上工作。高度：100%设置不透明度以显示整个页面。

如果背景页面的高度超出浏览器高度，仅将高度设置为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%;
}

---

如果您正在使用less版本编译引导，请在变量覆盖文件$modal BADDOUP OPATION for SCS中修改@modal BADDOUP OPATION。

使用

覆盖的问题！重要的

是您将失去淡入效果

因此，在不破坏fadeIn效果的情况下更改模式背景透明度的最佳技巧是，和而不必使用无耻的

！重要信息

是使用以下各项：

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

@sass

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

简单而干净。

使用此代码

$（#您的#modal_id”）。在（“show.bs.modal”，function（）上{
$（'.modal background.in'）.css（'opacity'，'0.9'）；
});以防万一有人在使用Bootstrap 4。似乎我们不能再使用
.modal background.in
，但现在必须使用
.modal background.show
。保持淡入效果

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

对我有效的是，我清除了.modal.background.in中的不透明度

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

换成

.modal-backdrop.in{
   }

添加！重要提示。模式背景会破坏引导模式的转换

我通过在bootstrap.min.css中直接编辑实现了更改模式覆盖背景。那些在本地使用引导CSS（不使用CDN）的用户可以更改.modal background类的背景色值

如果要更改引导4模式覆盖不透明度，请查找此类.modal background.show，并将不透明度更改为所需的值

如果要更改叠加过渡时间，请将过渡添加到.model background.fade类

如果要更改模式对象的过渡时间，请在.modal.fade.modal对话框中更改过渡值类
可以通过
rgb
函数的最后一个参数设置不透明度

示例中的不透明度为
0.5

.modal background{
背景色：rgb（0,0,0,0.5）；
}
您可以下载自定义编译的引导程序3，只需从以下位置自定义@modal background不透明度：


定制bootstrap 4需要从源代码处编译，覆盖$modal BACKUP bg，如中所述：


在对
有一个用于从源代码处编译Bootstrap 4的NodeJS工作流，单独使用一些非官方的Bootstrap 4定制程序。
它应该与以下程序一起使用：

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

如果我这样做，即使模态在打开时也是透明的。但是你提醒我要将模态背景类添加到模态div中。在此之后，现在背景是黑色而不是透明的。不要将模态背景添加到模态div中。模态背景是引导程序用于显示模态的背景的类。你只需要将这个CSS添加到页面中，我正在使用Bootstrap3并添加！重要提示会弄乱不透明度转换。如果你把重要的东西去掉，这个答案会很有用。以下是我所做的：.modal-background、.modal-background.fade.in{opacity:.5或任何您想要的；}谢谢您的解决方案。我们将其用于登录页面，在该页面中我们对内容进行“选通”。我删除了“关闭”x按钮，并试图找出如何使模式背景不可点击。访客在查看内容前必须填写表格。如果有人知道这样做的好方法，请告诉我。更新上述注释：我将以下内容应用于模式div，以防止在模式之外单击并关闭。谢谢您的回答。我尝试了所有操作，但仍然无法工作。我在开发人员工具中发现，当模态打开时，模态背景div添加在表单标记之外，我不确定这是否是原因。在问题中添加了图像。但是如果页面是可滚动的呢？这不会覆盖整个页面，然后这种方法对我也很好，不过我使用了另一种选择作为背景，不确定#pageContent位。此代码用于消除变暗效果$（“#忙模式”）.on（'show.bs.modal'，function（e）{$（'div.modal-background'）.css（'opacity'，0）；}）；$（“#忙模式”）.on（'hidden.bs.modal'，function（e）{$（'div.modal-background'）.css（'opacity'，0.5）；}）`提供一个例子来增加理解，让我更喜欢我想要的东西。这只会在一个模态实例中实现更强的淡入淡出，而不会影响其他实例，谢谢。更好的答案是，此解决方案保持淡入淡出过渡
.modal:before{
   opacity:0.001 !important;
}