2017-02-21 191 views
1

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

这里的JSFiddle

<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; 
} 

回答

2

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

下似乎做的伎俩:

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

JSFiddle example

+0

完美,感谢D.Werle! – MagicLuckyCat