Bootstrap 3 modal-backdrop не graying out

Question

Мое модальное окно выглядит прозрачным, а фон не затенен на странице. Формат HTML выглядит корректно по сравнению с другими примерами.

Вот 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; 
} 

Answer 1

Я думаю, что вам не хватает декларации ширина/высота.

Ниже, кажется, делает трюк:

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

JSFiddle example