我有一个包含在褪色 div 中的 Bootstrap 模式。
由于某种原因,模态框在打开后位于灰色背景后面,因此无法访问。
代码
HTML
<div>
<button class="btn btn-primary" data-target="#normal" data-toggle=
"modal">Normal</button>
<div class="modal fade" id="normal" role="dialog"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
</div>
<div id="faded">
<button class="btn btn-primary" data-target="#faded-modal" data-toggle=
"modal">Faded</button>
<div class="modal fade" id="faded-modal" role=
"dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
</div>
CSS
#faded {
opacity: 0.7;
}
结果
正常
褪色
正如您在示例中看到的那样,第一个模态框正确显示,第二个模态框(褪色的模态框)出现在背景后面,无法访问。
如何改变这种行为?模态应该像往常一样显示......
注意:我无法更改 HTML,并且我需要保持父级的不透明度,这是一个显示效果的更简单的示例,但还有其他元素也会褪色。
最佳答案
第二个模式也出现在背景前面,但由于父元素的原因,它的不透明度被淡化为 0.7。如果你想实现它不褪色,你需要使父 div 透明并粘贴一个新的 100% 宽度和高度,背景颜色和不透明度设置。您还需要使用 z-orders 来确保它出现在模式后面。
关于jquery - 不透明度出现在背景后面的 Bootstrap 模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37188801/