Twitter Bootstrap-为什么我的模态像背景一样褪色? [英] Twitter Bootstrap - why is my modal as faded as the background?

问题描述

因此，我使用的是Twitter Bootstrap，当用户单击注册"按钮时，该模式会向下滑动.

So I'm using Twitter Bootstrap and I have a modal that slides down when the user clicks the "Register" button.

唯一的问题是背景页面不仅会褪色，这是一个不错的效果，而且模态也会褪色.我如何获得它，以使背景光褪色时模态为正常亮度?

The only problem is that the not only does the background page fade, which is a nice effect, but the modal is also faded. How can I get it so that the modal is normal brightness while the background is faded?

我创建了一个JSFiddle来在这里演示我的问题: http://jsfiddle.net/jononomo/7z8RZ /7/

I created a JSFiddle to demonstrate my problem here: http://jsfiddle.net/jononomo/7z8RZ/7/

下面的代码创建一个褪色的模态:

The following code creates a faded modal:

<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，则一切正常.因此，问题在于该模式的代码在以下几行之内:

Note: if I remove the outer div, then everything works fine. So the problem is that the code for the modal is within the following lines:

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

我当然不想删除该div，因为我希望按钮启动模式的链接位于固定在屏幕顶部的导航栏中.

Of course I don't want to remove that div, since I want the button the link that launches the modal to be in the navbar that is fixed to the top of the screen.

编辑:我将其范围缩小到以下事实:外部div是navbar-fixed-top类.当我删除该标签后，一切都会按预期运行-您可以在此处看到其正常运行: http://jsfiddle.net/jononomo/7z8RZ/8/当然，我希望将导航栏固定在顶部，所以这不能解决我的问题.

Edit: I have narrowed it down to the fact that the outer div is of the class navbar-fixed-top. When I remove that tag, everything works as expected -- you can see it working correctly here: http://jsfiddle.net/jononomo/7z8RZ/8/ Of course, I would like the navbar to be fixed to the top, so this doesn't solve my problem.

推荐答案

检查此问题在Bootstrap git存储库中.

Check this issue on the Bootstrap git repository.

然后尝试将模式放在导航栏之前，例如此小提琴

Then try putting the modal before the navbar, like 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>

这篇关于Twitter Bootstrap-为什么我的模态像背景一样褪色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！