Twitter Bootstrap - なぜ私のモーダルは背景として退色していますか？

Question

私はTwitterブートストラップを使用しています。ユーザが「登録」ボタンをクリックすると、滑り台が下がります。

唯一の問題は、背景ページがフェードするだけでなく、素晴らしい効果ですが、モーダルもフェードしてしまうことです。背景が薄れている間にモーダルが通常の明るさになるように、どうすればいいですか？ 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> 

注：

私はここに私の問題を証明するためにJSFiddleを作成した私は、外側のdivを削除する場合は、すべてが正常に動作します。だから、問題は、モーダルのコードは次の行の中にあるということです。もちろん

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

私は、そのdiv要素を削除したくない私はになるようにモーダルを起動するリンクをボタンにしたいので、ナビゲーションバーは画面上部に固定されています。

を編集してください：外側のdivがクラスnavbar-fixed-topであるという事実に絞りました。このタグを削除すると、すべて正常に動作します。http://jsfiddle.net/jononomo/7z8RZ/8/もちろん、Navbarを上部に固定したいので、これで問題は解決しません。

Answer 1

ブートストラップgitリポジトリのthis issueを確認してください。

のように、の前にのナビゲーションバーを配置してみてください。

<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">タグ内のモーダル内のすべてのものをラップすることによりだった解決方法を。モーダルが背景と同じようにグレーになってしまっmodal-contentのdiv、なければ

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

：それはこのような何かを見ました。