引导模态出现在背景下

JavaScript

理查德村村小宇宙

2020-03-12

我直接从Bootstrap示例中使用了模态代码，仅包含bootstrap.js（而不包含bootstrap-modal.js）。但是，我的模态出现在灰色渐变（背景）下方，并且不可编辑。

看起来是这样的：

隐藏在背景后面的模态

请参阅此提琴，以获取重现此问题的一种方法。该代码的基本结构如下：

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

关于这是为什么的任何想法，或者我可以做些什么来解决这个问题？

第985篇《引导模态出现在背景下》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共22个回答

MandyL 2020.03.12

就我而言，我有以下包装：

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

只删除了z-index：1，却不知道为什么要解决此问题。也可以确定删除相对位置，但是我需要它。

启人 2020.03.12

对我来说，最简单的解决方案是将我的模态放入包装中，其绝对位置和z-index高于.modal-backdrop。由于模式背景（至少在我的情况下）具有z-index 1050：

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}

<div class="my-modal-wrapper"></div>

米亚番长 2020.03.12

我通过在DIV标签中添加以下样式来解决此问题

style="background-color: rgba(0, 0, 0, 0.5);"

并添加自定义CSS

.modal-backdrop {position: relative;}

Green达蒙 2020.03.12

您也可以从.modal-backdrop中删除z-index。结果css看起来像这样。

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

A达蒙 2020.03.12

我删除了模态背景。

.modal-backdrop {
    display:none;
}

这不是更好的解决方案，但对我有用。

西门GO 2020.03.12

将绝对位置更改为相对。

.modal-backdrop {
    position: relative;
    /* ... */
}

A村村 2020.03.12

在您的导航栏navbar-fixed-top需要z-index = 1041 以及如果您使用bootstarp-combined.min.css还更改 .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

宝儿L 2020.03.12

就我而言，解决它，在我的样式表中添加它：

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

使用Google调试器，可以检查元素BACKDROP并修改属性。祝你好运。

飞云神奇 2020.03.12

我有一个更轻更好的解决方案。

通过一些其他CSS样式可以轻松解决。

隐藏类.modal-backdrop（从Bootstrap.js自动生成）

.modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

将的背景设置.modal为半透明的黑色背景图像。

.modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

如果您有一个需要模态在元素内而不在</body>标签附近的要求，那么这将是最好的选择。

小小Sam小哥 2020.03.12

将z-index .modal设置为最大值

例如，.sidebarwrapper的z-index为1100，因此将.modal的z-index设置为1101

.modal {
    z-index: 1101;
}

蛋蛋神乐 2020.03.12

我遇到了这个问题，最简单的解决方法是modal-dialog div上的addind z-index大于1040：

<div class="modal-dialog" style="z-index: 1100;">

我相信bootstrap会创建一个div模态背景淡入，在我的情况下，其z索引为1040，因此，如果您将modal-dialog放在此之上，则不应再变灰。

有壳网 2020.03.12

嗨，我遇到了同样的问题，然后我意识到，当您使用bootsrap 3.1时，与旧版本的bootsrap（2.3.2）不同，模态的html结构已更改！

您必须使用modal-dialog和modal-content来包装您的模式页眉正文和页脚

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

小卤蛋Tom 2020.03.12

当在CSS中将诸如渐变之类的东西用于背景甚至手风琴头时，通常会遇到此问题。

不幸的是，修改或覆盖核心的Bootstrap CSS是不希望的，并且可能导致不良的副作用。介入最少的方法是添加，data-backdrop="false"但您可能会注意到淡入淡出效果不再像预期的那样起作用。

在遵循最新发布的Bootstrap之后，版本3.3.5似乎可以解决此问题，并且没有不良影响。

下载：https : //github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

确保包含3.3.5中的CSS文件和JavaScript文件。

JinJin梅 2020.03.12

在您的模式中使用它：

data-backdrop="false"

Ss Yy 2020.03.12

只需添加两行CSS：

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.modal-backdrop应该具有1050值才能在导航栏上进行设置。

→笑里藏刀↓ 2020.03.12

我简单地设置：

#myModal {
    z-index: 1500;
}

它有效....

对于原始问题：

.my-module {
    z-index: 1500;
}

Pro逆天猿 2020.03.12

解决此问题的另一种方法是从.modal-backdropbootstrap.css中删除z-index 。这将导致背景与您身体的其余部分处于同一水平（它仍将褪色），并且模态位于顶部。

.modal-backdrop 看起来像这样

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

小碗儿 2020.03.12

通过在打开模态窗口后为其赋予较高的z-index值，可以使其工作。例如：

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

凯泡芙A 2020.03.12

另外，请确保BootStrap css和js的版本相同。不同的版本也可以使模式出现在后台：

例如：

坏：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

好：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

番长 2020.03.12

我也遇到了这个问题，在我发现我实际上不需要背景之前，没有一种解决方案对我有用。您可以使用以下代码轻松删除背景。

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

注意：该data-backdrop属性需要设置为false（其他选项：static或true）。