我有一个引导模式,包含在一个褪色的div中 .
由于某种原因,打开后的模态位于灰色背景后面,因此无法访问 .
代码
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;
}
结果
正常
褪色
正如您在示例中看到的那样,第一个模态正确显示,第二个模式(褪色的模式)出现在背景后面,无法访问 .
我该如何改变这种行为?模态应该像往常一样显示......
Notes: 我无法更改HTML,我需要在父级上保持不透明度,这是一个更简单的示例来显示效果,但还有其他元素也会褪色 .
4 回答
第二个模态也出现在背景前面,但由于父元素是,它会逐渐变为0.7不透明度 . 如果你想要实现它的不褪色,你需要使父div透明,并在100%宽度和高度,背景颜色和不透明度设置中粘贴一个新的div . 您还需要使用z-order确保它出现在模态后面 .
工作代码,只是添加了褪色的CSS到按钮
不要将“褪色”ID应用于按钮周围的div . 将其应用于按钮本身 . 要使用淡化按钮,请将淡化作为类应用于按钮 .
http://jsbin.com/jefimarewi
必须将
<div class="modal fade"...
移出<div id="faded">...
,以便它不会将<div class="modal fade"...
作为其父div .即代替
尝试...