Twitter Bootstrap - 爲什麼我的模態像背景一樣褪色？

Question

所以我使用的是Twitter Bootstrap，當用戶點擊「註冊」按鈕時，我有一個滑落的模式。

唯一的問題是，不僅背景頁面會褪色，這是一個不錯的效果，但模式也褪色。我怎樣才能得到它，使模式是正常的亮度，而背景褪色？

我創建了一個的jsfiddle來證明我的問題就在這裏：http://jsfiddle.net/jononomo/7z8RZ/7/

下面的代碼創建一個褪色的模式：

<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a> 
    <div id="registration_modal" class="modal hide fade"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
       <h3 id="myModalLabel">Register An Account</h3> 
     </div> 

     <div class="modal-body"> 
      Registration form goes here. 
     </div> 

     <div class="modal-footer"> 
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
      <button class="btn btn-primary">Register</button> 
     </div> 

    </div> 
</div> 

注意：如果我刪除外格，然後一切工作正常。所以問題是，該模式的代碼是以下行中：

<div class="navbar navbar-fixed-top"> 
</div> 

當然，我不希望刪除該分區，因爲我想要的按鈕啓動模式是在鏈接固定在屏幕頂部的導航欄。

編輯：我已經縮小到外部div是類navbar-fixed-top的事實。當我刪除標籤時，一切都按預期工作 - 您可以在這裏看到它正常工作：http://jsfiddle.net/jononomo/7z8RZ/8/當然，我想將導航欄固定在頂部，所以這不能解決我的問題。

Answer 1

在Bootstrap git存儲庫上檢查this issue。

然後嘗試在之前將模態放置在導航欄中，如this fiddle。

<div id="registration_modal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3>Register An Account</h3> 
    </div> 

    <div class="modal-body"> 
     Registration form goes here. 
    </div> 

    <div class="modal-footer"> 
     <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
     <button class="btn btn-primary">Register</button> 
    </div> 

</div> 
<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a>  
</div> 

Answer 2

很不幸，答案在這裏並沒有幫助我。幸好這次討論有同樣的問題，他們都爲我工作有幫助的答案。基本上，你必須確保該模式沒有繼承父項的div任何奇怪的定位元素：

Bootstrap modal appearing under background

Answer 3

我解決它是由<div class="modal-content">標籤內模內包裝的一切方式。它看起來是這樣的：

<div class="modal fade" id="TestModal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      Modal header here 
     </div> 
     <div class="modal-body"> 
      <p>Modal content here</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 

沒有modal-content格，模態結束了，就像灰色作爲背景。