Twitter的引导 - 为什么我的模式是褪色的背景是什么？(Twitter Bootstrap -

所以我使用Twitter的引导和我有向下滑动时，用户点击“注册”按钮，一个模式。

唯一的问题是，不仅做后台页面褪色，这是一个很好的效果，但语气也淡了。 我怎样才能得到它，这样的模式是正常亮度，而背景褪色？

我创建了一个对的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:

检查这个问题上的引导git仓库。

然后尝试把模态导航栏前 ，像这样的小提琴 。

<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任何奇怪的定位元素：

引导模式下出现的背景

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 DIV，模式结束了，就像灰色作为背景。

文章来源: Twitter Bootstrap - why is my modal as faded as the background?