Javascript 引导模式打开时如何更改背景不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28096346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change background Opacity when bootstrap modal is open
提问by Bhargavi
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 仍然保留不透明度样式。但是，我确信这不是正确的做法。任何帮助表示赞赏。谢谢。打开 Modal 的 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">×</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:
编辑：
回答by Hemant
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;
}
!importantprevents the opacity from being overwritten - particularly from Bootstrap in this context.
!important防止不透明度被覆盖 - 特别是在这种情况下从 Bootstrap 覆盖。
回答by ThisIsMarkSantiago
You can override the modal-backdrop opacity in your stylesheet [take note of the .in class]
您可以覆盖样式表中的模态背景不透明度 [注意 .in 类]
.modal-backdrop.in {
opacity: 0.9;
}
回答by Sudhir Bastakoti
回答by Sudhir Bastakoti
The problem with overriding using !importantis that you will loose the fade in effect.
覆盖 using 的问题!important是您将失去淡入效果。
So the actual best trick to change the modal-backdrop opacity without breaking the fadeIn effectand without having to use the shameless!importantis to use this :
因此，在不破坏淡入效果且无需使用无耻的情况下更改模态背景不透明度的实际最佳技巧!important是使用以下方法：
.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.
简单干净。
回答by barfuin
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-backdrop.in，但现在必须使用.modal-backdrop.show. 保留淡入淡出效果。
.modal-backdrop.show {
opacity: 0.7;
}
回答by SoulRayder
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%;
}
回答by Jonathan Cohlmeyer
If you are using the less version to compile Bootstrap modify @modal-backdrop-opacity in your variables override file $modal-backdrop-opacity for scss.
如果您使用较少版本来编译 Bootstrap，请修改变量中的 @modal-backdrop-opacity 覆盖文件 $modal-backdrop-opacity for scss。
回答by Vitalya Litvinov
use this code
使用此代码
$("#your_modal_id").on("shown.bs.modal", function(){
$('.modal-backdrop.in').css('opacity', '0.9');
});回答by Bhargavi
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.
经过一天的努力，我发现将 height :100% 设置为 .modal-backdrop.in 类有效。height : 100% 使不透明度显示整个页面。
回答by Shahas Nizar
Adding !important to .modal-backdrop will ruin the transition on bootstrap modal
添加 !important 到 .modal-backdrop 会破坏引导模式的过渡
I achieved changing modal overlay background by direct edit in bootstrap.min.css. Those who are using bootstrap CSS locally (without using CDN) can change the background-color value of .modal-backdropclass.
我通过在bootstrap.min.css 中直接编辑实现了改变模态叠加背景。那些在本地使用 bootstrap CSS（不使用 CDN）的人可以更改.modal-backdrop类的背景颜色值。
If you want to change bootstrap 4 modal overlay opacity find this class .modal-backdrop.showand change opacity to the value you need.
如果您想更改 bootstrap 4 modal 覆盖不透明度，请找到此类.modal-backdrop.show并将不透明度更改为您需要的值。
If want to change overlay transition timing add transition to .modal-backdrop.fadeclass
如果想改变叠加过渡时间添加过渡到.modal-backdrop.fade类
If want to change transition timing for modal object change transition values in .modal.fade .modal-dialogclass
如果要更改.modal.fade .modal-dialog类中的模态对象更改过渡值的过渡时间
