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，則一切正常。 所以問題是模式的代碼在以下幾行中：

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

當然，我不想刪除那個 div，因為我希望啟動模式的鏈接按鈕位於固定在屏幕頂部的導航欄中。

編輯：我已將范圍縮小到外部 div 屬於類navbar-fixed-top的事實。 當我刪除那個標簽時，一切都按預期工作——你可以在這里看到它正常工作： http : //jsfiddle.net/jononomo/7z8RZ/8/當然，我希望導航欄固定在頂部，所以這不能解決我的問題。

Answer 1

在 Bootstrap git 存儲庫上檢查此問題。

然后嘗試將模態放在導航欄之前，就像這個 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 模式出現在背景下

Answer 3

我遇到過同樣的問題。 對我來說，解決方案是將模態 div 放在結束正文標簽之前。

Answer 4

我解決它的方法是將模態中的所有內容都包裝在<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 div，模態最終與背景一樣灰色。