twitter-bootstrap Bootstrap 模态窗口是灰色的

Question

提问by Don P

Go to this site, click "Log In" in the top right corner, and a twitter-bootstrap modal window will pop out but be grayed out.

转到此站点，单击右上角的“登录”，将弹出 twitter-bootstrap 模式窗口，但显示为灰色。

Why does this happen?

为什么会发生这种情况？

Answer 1

It's because .navbar-fixed-tophas a z-index of 1030 while the modal backdrop has a z-index of 1040, causing the modal to overlay the navbar.

这是因为.navbar-fixed-topz-index 为 1030，而模态背景的 z-index 为 1040，导致模态覆盖导航栏。

To fix this, just adjust the .modal-backdropz-index value to be lower than 1030 - e.g.

要解决此问题，只需将.modal-backdropz-index 值调整为低于 1030 - 例如

.modal-backdrop {
    z-index: 1020;
}

Answer 2

You can also use:

您还可以使用：

 .modal-backdrop.in { z-index: auto;}

Answer 3

First of all, add data-backdrop="false"to your modal div

首先，将data-backdrop="false" 添加到您的模态 div

Then add the following to your style:

然后将以下内容添加到您的样式中：

.modal { background: rgba(000, 000, 000, 0.8); min-height:1000000px; }

Don't forget to add the close button into your modal...

不要忘记将关闭按钮添加到您的模态中...

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Cheers..

干杯..

Answer 4

I had to add !important to get it working.

我必须添加 !important 才能让它工作。

.modal-backdrop {
    z-index: 1020!important;
}