Bootstrap模态窗口显示为灰色

Don*_*n P 27 twitter-bootstrap

转到此站点,单击右上角的"登录",将弹出一个twitter-bootstrap模式窗口,但显示为灰色.

为什么会这样?

adr*_*ift 28

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

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

.modal-backdrop {
    z-index: 1020;
}
Run Code Online (Sandbox Code Playgroud)

  • 以下适用于 bs4 .modal-backdrop { display: none; } .modal { 背景:rgba(0,0,0,0.5); } (2认同)

小智 27

您还可以使用:

 .modal-backdrop.in { z-index: auto;}
Run Code Online (Sandbox Code Playgroud)

  • 这是最好的答案. (2认同)

小智 19

首先,将data-backdrop ="false"添加到模态div中

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

.modal { background: rgba(000, 000, 000, 0.8); min-height:1000000px; }
Run Code Online (Sandbox Code Playgroud)

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

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Run Code Online (Sandbox Code Playgroud)

干杯..

  • 谢谢; 添加`data-backdrop ="false"`立即修复它. (3认同)