だから私は 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 を削除すると、すべて正常に動作します。問題は、モーダルのコードが次の行内にあることです。
<div class="navbar navbar-fixed-top">
</div>
もちろん、そのdivを削除したくありません。モーダルを起動するリンクのボタンを、画面の上部に固定されているナビゲーションバーに配置したいからです。
編集:外側のdivがクラスであるという事実に絞り込みましたnavbar-fixed-top
。そのタグを削除すると、すべてが期待どおりに機能します-ここで正しく機能していることを確認できます: http://jsfiddle.net/jononomo/7z8RZ/8/ もちろん、ナビゲーションバーを上部に固定したいので、これは私の問題を解決しません。