web-dev-qa-db-ja.com

Twitter Bootstrap-なぜ私のモーダルは背景と同じくらい色あせているのですか？

つまり、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/ もちろん、navbarに上に固定されるので、これは私の問題を解決しません。

javascripttwitter-bootstrapmodal-dialogfade
21
jononomo

Bootstrap gitリポジトリで この問題 を確認してください。

次に、モーダルの前にナビゲーションバーを 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>

24
crowjonah

残念ながら、ここでの回答は私には役立ちませんでした。しかし幸いにも、この議論には同じ問題があり、彼らにとって私にとって有効な役立つ回答がありました。基本的に、モーダルが親divから奇妙な配置要素を継承していないことを確認する必要があります。

背景の下に表示されるブートストラップモーダル

5
janeeats