2017-02-21 119 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