Bootstrap模态出现在背景下

575

我直接从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;
}

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

— 纳豆
source

如果有人在一段时间内寻找打开的标签等，试图弄清楚为什么会发生这种情况，对我来说，正是Feedly chrome扩展打破了我的模式。禁用扩展将行为恢复为正常。

— threeve 2014年

在可能的情况下，问题出在iOS上，是由overflow-x: hidden应用于模式容器引起的。

— idmean 2015年

1

在3个版本中创建了3个示例。3.3.1可以正常运行，而其他则不能。版本3.3.1 jsfiddle 版本3.3.5 jsfiddle 版本3.3.6 jsfoddle

— Dimitry

1

与Bootstrap团队一起创建错误报告似乎并不是一个错误，甚至认为它在3.3.1中也可以正常工作。您可以在我发布的链接中了解更多信息。

— Dimitry

相关的博客文章任何人面对这个问题weblog.west-wind.com/posts/2016/Sep/14/...

627

如果模式容器具有固定或相对位置，或者位于具有固定或相对位置的元素内，则会发生此行为。

确保模式容器及其所有父元素都位于解决问题的默认方式。

以下是几种方法：

最简单的方法是仅移动模态div，使其位于具有特殊定位的任何元素之外。一个好地方可能就在封闭标签的前面</body>。
或者，您可以position:从模式及其祖先中删除CSS属性，直到问题消失。但是，这可能会更改页面的外观和功能。

— 穆德
source

23

接得好。仅供参考，不只是“固定”，父母的立场“相对”也导致了这个问题

— Giang Nguyen

3

@Muhd如何确定它及其所有父元素以默认方式放置？

— indago

4

最好使用选项一：“只需移动模式div，使其位于任何具有特殊定位的元素之外”。Thx

— mpgn

9

我不明白这个答案。Bootstrap示例显示了一个模态div，它沿着“模态”，“模态淡入”等线具有许多类。那么，当.modal设置position：fixed时，如何移动模式容器进行任何更改？

— 卡洛斯

4

我仍然有这个问题。我在之前添加了它</body>，body没有任何position样式属性。还有其他想法吗？

— Tuan Anh Tran 2015年

383

问题与父容器的位置有关。在显示模态之前，您可以轻松地将其从这些容器中“移出”。如果您show使用js输入模态，则方法如下：

$('#myModal').appendTo("body").modal('show');

或者，如果您使用按钮启动模式，请放下.modal('show');并执行以下操作：

$('#myModal').appendTo("body")

这将保留所有正常功能，允许您使用按钮显示模态。

— 亚当·奥尔布赖特
source

12

使用该通用事件处理程序使@leandrotk解决方案适用于您可以在页面中使用的所有模态

$('.modal-dialog').parent().on('show.bs.modal', function(e){        $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })

— Patrick M.

2

@PatrickM。惊人！在我接手的一个旧项目中，它像一个魅力一样发挥了作用，而且到处都是模态！

— denislexic

5

当您确实无法固定CSS位置时，这非常有用。谢谢:)

— alexcasalboni

执行此操作时，为什么我会放弃所有CSS格式？一个简单的解决方法？:-)

— 尤金·范德默

1

从leandrotk答案中，只需将#myModal更改为.modal即可，如下所示：$（'。modal'）。appendTo（“ body”）。这将适用于所有模态，因为它们具有默认的类模态。

— Ngatia Frankline

170

我尝试了上面提供的所有选项，但没有使用它们。

起作用了：将.modal-backdrop的z-index设置为-1。

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

— 简·范德伯格
source

10

这完美地工作了，是迄今为止最简单的解决方案。我曾经用过z-index: 0;

— andrewcockerham

还可以确认只有此选项有效！谢谢！

— Ferry Kranenburg

谢谢！这是BS3的错误吗？

— mauriblint

1

如果您使用的主题具有许多不同的Z索引，则此方法不起作用。例如，将背景设置为-1会使背景出现在页面上其他元素（如面板）的后面。但是将其设置为3除模式弹出框之外，使其位于一切之上。

— 贾斯汀·斯基尔斯

1

在用完上面评分较高的答案中的建议后，我发现这也是最快的方法。在我的情况下，将modal-dialog类的div设置为z-index为1060会在叠加层前面弹出它。如果您使用导航栏，则需要将模式移动到叠加层上方，而不是其他方式，否则导航栏可能会弹出在叠加层上方...混乱导致...

— Mike Devenney 2015年

152

另外，请确保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>

— 席德
source

这对我来说也是。谢谢！

— PedroTanaka 2015年

只是有相同的问题，相同版本的样式表解决方案似乎对所有人都有帮助！谢谢

— HGB 2015年

谢谢，这是我的确切问题

— Malcor

马尔科（Malcor）没问题，我花了很多时间弄清楚这个错误。正如我们看到的那样，这是在'14，现在是'16，错误仍然存在。实际上，这不是错误，但是在引导程序中，作者应将此错误添加到他们的文档中。

— 希德

同样的事情，我们切换到生成我们的SASS，并完全忘记了js文件本身。。这应该是最重要的答案。因为默认情况下，总是在主体关闭标签之前包含我们的模态...

— Angry 84

116

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

<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）。

— 彼得VK
source

2

到目前为止，最简单的解决方案，就像一个魅力！

— learning_to_swim

辉煌！我还需要引导程序-不知道为什么我所有其他Bootstrap功能都可以正常工作，但是我需要进行模态工作。

— 史蒂夫·克莱因

完美！奋斗了一天..你救了我另一天。再次感谢.. +1和欢呼

— Bhaskara 2015年

1

仔细阅读所有解决方案后，我发现这是当今Bootstrap和jQuery版本中最明智的解决方案。谢谢。

— 加密

3

谢谢！这个问题有14万多个视图，我不明白为什么引导程序无法解决此问题。哦，干杯。

— 乍得

58

我通过在打开模态窗口后给它一个高的z-index值来使其工作。例如：

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

— 安德鲁·迪斯特（Andrew Dyster）
source

这是可行的（男人说是这样），为什么您投反对票？在我看来，似乎会。

— 罗里斯

是的，任何人都可以解释为什么这是一个错误的答案吗？仅仅是因为它很hacky？

— brandones

6

我不理解反对票。是的，它很hacky，但是其他解决方案对我不起作用，所以我想为那些不介意使用“ hacky”解决方案来使该死的事情起作用的人们做出贡献。

— Andrew Dyster

这是对我的特定问题的重要见解，将模式置于全屏元素之上。+1

— 杰克·斯通

3

这是一个错误的答案，因为它是骇客行为，并且不做任何尝试来表明这一点。其他答案是，“如果没有其他作用，您可以...”。现实情况是，该模式已在整个Web上得到了广泛使用，如果正确实现，则应该可以使用。骇人听闻的答案并不能帮助人们弄清楚如何正确地做事。

— 卢克斯2014年

35

@Muhd提供的解决方案是最好的方法。但是，如果您陷入无法更改页面结构的情况，请使用以下技巧：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

这里的技巧是data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" 删除默认背景，并通过使用一些alpha设置对话框本身的背景颜色来创建一个虚拟背景。

更新1： 正如@Gustyn所指出的那样，单击背景不会按预期关闭对话框。因此，要实现这一点，您必须添加一些Java脚本代码。这是一些示例，您可以如何实现此目的。

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

— 克里申杜
source

除在背景上单击不会按预期关闭对话框外，此方法有效。

— 古斯汀

Krishnendu你是我的英雄。我开始工作时充满了厄运和忧郁。在我最后一次面对这个问题的演讲的前三天，至少可以说，这真是令人不安。my，我的朋友值得100000票。a只能给你一个:)祝你有美好的一天。

— DotNetBeginner

当我尝试这一点，它不包括页面的完整背景-只有div元素，该模式在声明。

— 威尔山姆

工作完美。谢谢！

— gfernandes

工作完美。谢谢！

— Mayank Pandeyz '18年

16

一个但很晚但是这里是一个通用的解决方案-

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

访问此链接-Bootstrap 3-使用固定的侧边栏获取详细信息时，模态消失在背景下。

— 罗汉
source

对于我在无法控制其他人主题的父元素的地方创建的Wordpress插件，这是一个完美的解决方案。

— Mark Rummel 2014年

迄今为止最好的解决方案！

— digz6666

10

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

.modal-backdrop 看起来像这样

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

— 塞缪尔·贝杰隆
source

10

只需添加两行CSS：

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

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

— Wahyu Primadi
source

很好，但是如果模态容器具有position: fixed此功能将不起作用。

— CPHPython

10

这将覆盖所有模态，而不会弄乱任何动画或预期行为。

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

— 卡姆·图洛斯（Cam Tullos）
source

1

全局解决方案。但是最好找到问题。

— Milad Abooali

我认为这不是一个很好的解决方案，具有许多模式的页面又如何呢？可能会变得凌乱。

— 格伦

您能解释一下它会变得混乱吗？它所做的只是将模式从当前在DOM中的位置移动到body标签的末尾。它不会创建尚不存在的任何东西，只是将其移动并自动为它提供最高的z索引。

— 卡姆·图洛斯

我认为最好的解决方案。无需编辑任何CSS并更改模态外观

— Moslem7026

8

我已经简单地设置了：

#myModal {
    z-index: 1500;
}

它有效....

对于原始问题：

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

— 密码
source

我的问题也是z-index。

— 詹姆斯·洛克

8

在您的模式中使用它：

data-backdrop="false"

— 乔纳森
source

8

当在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文件。

— 理查德·纳雷辛斯基
source

6

嗨，我遇到了同样的问题，然后我意识到，当您使用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>

— 塔西伯尼
source

+1确保您使用的是bootstrap.css和bootstrap.js的兼容版本，并且您的标记与您使用的版本匹配。

— srayner 2014年

是的，这就是我的结论，即使有人遇到这个问题，我也在这里写下来。

— 塔尔西伯尼2014年

耶稣基督，这个答案很深。同样的情况下引导4

— 兰德尔

6

上面建议的解决方案均不适合我，但此技术解决了该问题：

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

— 贾维德·伊克巴尔
source

我更喜欢这种方式，因为我失去了其他方法的CSS格式。

— 尤金·范德默

6

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

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

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

— 克里斯·罗斯特
source

6

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

通过一些其他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>标签附近的要求，那么这将是最好的选择。

— JM T恤
source

你救了我的日子...这是一个不错的选择！

— notme

@xunga，不用担心。请将此解决方案分享给其他人：）

— JM Tee

您可以在此处查看编辑... stackoverflow.com/posts/42887253/revisions

— notme

感谢JM，您的解决方案是唯一对我有用的解决方案。

— 艾哈迈德·J。

5

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

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

.modal {
    z-index: 1101;
}

— Mohudum Kamil
source

5

就我而言，将其添加到样式表中：

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

展开摘要

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

— 凯文·奥瓦尔（Ckevyn Ovalle）
source

3

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

— 莫欣
source

3

将绝对位置更改为相对。

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

— 阿里斯托·罗里斯（Aristeu Roriz）
source

1

它删除了黑色背景

— HCarrasko 2015年

3

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

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

— 马修·加里戈斯（Matthew Gallegos）
source

3

我删除了模态背景。

.modal-backdrop {
    display:none;
}

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

— 代码简述
source

3

我发现的是：

在bootstrap 3.3.0中是不正确的，但是在bootstrap 3.3.5中是正确的。让我们看一下代码。3.3.0：

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

— 通
source

3

将此页面添加到您的页面。它对我有用。

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

— 武井
source

3

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

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

并添加自定义CSS

.modal-backdrop {position: relative;}

— 雷蒙·雷
source

3

$('.modal').insertAfter($('body'));

— 用户名
source

3

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

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

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

展开摘要

— sivi911
source

z-index为我工作。非常感谢。

— Asif Iqbal，

2

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

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

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

— 索比
source