Twitter Bootstrap - 为什么我的模态与背景一样褪色?

2022-01-17 00:00:00 modal-dialog javascript twitter-bootstrap fade

所以我正在使用 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.

然后尝试将模式放在导航栏之前，例如 this fiddle.

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>

相关文章