jquery - 不透明度出现在背景后面的 Bootstrap 模态

Question

我有一个包含在褪色 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;
}

结果

正常

褪色

Demo here

正如您在示例中看到的那样，第一个模态框正确显示，第二个模态框(褪色的模态框)出现在背景后面，无法访问。

如何改变这种行为？模态应该像往常一样显示......

注意:我无法更改 HTML，并且我需要保持父级的不透明度，这是一个显示效果的更简单的示例，但还有其他元素也会褪色。

Answer 1

第二个模式也出现在背景前面，但由于父元素的原因，它的不透明度被淡化为 0.7。如果你想实现它不褪色，你需要使父 div 透明并粘贴一个新的 100% 宽度和高度，背景颜色和不透明度设置。您还需要使用 z-orders 来确保它出现在模式后面。