Javascript 推特引导-为什么我的模态像背景一样褪色？

因此，我使用Twitter引导，当用户单击“注册”按钮时，我有一个向下滑动的模式

唯一的问题是，不仅背景页褪色，这是一个很好的效果，但模式也褪色。我如何才能得到它，使模式是正常的亮度，而背景褪色

我在这里创建了一个JSFIDLE来演示我的问题：

以下代码创建淡入淡出的模式：

<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，因为我希望启动model的按钮链接位于固定在屏幕顶部的导航栏中

Edit：我已经将它缩小到外部div属于

navbar固定顶类的事实。当我删除该标记时，一切都按预期工作——您可以在这里看到它正常工作：当然，我希望导航栏固定在顶部，因此这并不能解决我的问题。
检查引导git存储库

然后尝试将模态放在导航栏之前，如


×
开户
登记表在这里。
取消
登记

​
 不幸的是，这里的答案对我没有帮助。。但幸运的是，这次讨论也有同样的问题，他们有一个对我有用的答案。基本上，您必须确保模态没有从父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>


这里是模态头
这里的模态内容

接近

如果没有
模态内容
div，模态结果就像背景一样灰色。
我也有同样的问题。对我来说，解决方案是将modal div放在结束体标记之前。
我的JSFIDLE示例在编辑之前不起作用，所以我被否决了。@JonCrowell看看这个更新：在我的情况下，这是完全不可能的。如果不这样做怎么能做到呢？模态也可以出现在导航栏之后。要认识到的关键是，指向模态的链接可以嵌套在navbar下，但nodal不是navbar的子项。@wavemode我对此做了更多的研究，显然，模态特性有一些值得注意的问题，这取决于使用JQuery和Bootstrap的组合。我正在使用jQuery1.10.2和Bootstrap3.3.2，它运行良好。
<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>