Question

我的模态窗口显示为透明，背景在页面上不显示为灰色。与其他示例相比，HTML格式看起来更正确。

<p>
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
</p>

<div class="modal-backdrop">
  <div class="modal show" id="myModal" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">          
          <h4 class="modal-title">My Modal</h4>
        </div>
        <div class="modal-body">
          <p>My Modal Body</p>
        </div>        
      </div>
    </div>
  </div>
</div>

CSS：

.modal-backdrop {
  background-color: gray !important;
  opacity: 0.9;
}

Answer 1

我认为您缺少宽度/高度声明。

以下似乎正在做这个伎俩：

.modal-backdrop {
  background-color: rgba(100, 100, 100, 0.8);
  width: 100vw;
  height: 100vh;
}

JSFiddle example

Bootstrap 3模态背景不会变灰

1 个答案: