css - Twitter Bootstrap Modal 受 opacity CSS 规则的影响

Question

如果在模态的 html 所在的主体上设置了“不透明度”（小于 1），则 Twitter 引导模态在模态顶部设置背景时遇到问题。

html布局：

<div id="content-area">
  ...some html

  <div id="someModelId">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Some Title</h3>
    </div>
    <div class="modal-body">
      <div>
         ...some content
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

CSS

.content-area {
 opacity:0.9;
}

因此，结果是当 Modal 被调用时：

$("#someModelId").modal();

模态指定的背景位于模态前面，单击模态就像您在模态上下文之外单击并导致它关闭一样。

Answer 1

事实证明，这需要将受影响的对话框 html 移动到通过 css 应用不透明度规则的区域之外。