Question

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

这是它的样子：

modal hiding behind backdrop

请参阅this fiddle了解一种方式来重现此问题。该代码的基本结构如下：

<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;
}

为什么会这样或者我能做些什么来解决这个问题？

Answer 1

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

确保将模态容器及其所有父元素定位为解决问题的默认方式。

以下是一些方法：

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

Answer 2

问题与父容器的定位有关。你可以轻松地移动＆＃34;在显示之前从这些容器中取出模态。如果您使用js show使用模态，请按照以下步骤操作：

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

或者，如果您使用按钮启动模态，请删除.modal('show');，然后执行：

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

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

Answer 3

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

做了什么工作：将.modal-backdrop的z-index设置为-1。

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

Answer 4

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

Answer 5

我也遇到过这个问题，直到我发现我实际上并不需要背景，所有这些解决方案都不适用于我。您可以使用下面的代码轻松删除背景。

<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（other options：static或true）。< / p>

Answer 6

我通过给模态窗口 AFTER 打开它来获得高z-index值来实现它。 E.g：

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

Answer 7

@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');
});

Answer 8

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

    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 - modal disappearing below backdrop when using a fixed sidebar了解详情。

Answer 9

只需添加两行CSS：

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

.modal-backdrop应该有1050的值来设置它在导航栏上。

Answer 10

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

.modal-backdrop看起来像这样

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

Answer 11

我只是设置：

#myModal {
    z-index: 1500;
}

它有效......

对于原始问题：

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

Answer 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文件。

Answer 13

我有这个问题，修复它的最简单方法是在模态对话框div上大于1040的addind z-index：

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

我相信bootstrap创建了一个div模式背景淡入淡出，在我的情况下有z-index 1040，所以如果你把模态对话框置于其上，它就不应该变灰了。

Answer 14

嗨我有同样的问题然后我意识到当你使用bootsrap 3.1 与较旧版本的bootsrap（2.3.2）不同模态的html结构发生了变化！

你必须用模态对话框和模态内容包装模态标题的主体和页脚

<div class="modal hide fade">

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

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

    </div>
  </div>

 </div>

Answer 15

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

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

.modal {
    z-index: 1101;
}

Answer 16

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

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

Answer 17

在我的情况下解决它，在我的样式表中添加它：

＆＃13;

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

＆＃13;

使用google调试器，可以检查元素BACKDROP并修改属性。 Goog运气好。

Answer 18

以上建议的解决方案都没有为我工作，但这种技术解决了这个问题：

$('#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);
});

Answer 19

我有一个更轻松，更好的解决方案..

可以通过一些额外的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>标记附近，那么这将最有效。

Answer 20

在你的模态中使用它：

data-backdrop="false"

Answer 21

我发现适用于所有 my 案例的最简单解决方案是答案in a similar post：

这里是：

.modal {
  background: rgba(0, 0, 0, 0.5); 
}
.modal-backdrop {
  display: none;
}

基本上，不使用原始背景。相反，您使用模态作为背景。结果是它的外观和行为与原始版本完全一样。它避免了z-indexes的所有问题（对我来说，将z-index更改为0可以解决该问题，但是由于我的导航菜单位于模式和背景之间而造成了一个新问题），而且很简单。

贷方@Jevin O. Sewaruth发布了原始答案。

Answer 22

我通过将data-backdrop="false"添加到div解决了我的问题：

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

.....

Answer 23

您还可以从.modal-backdrop中删除z-index。产生的css看起来像这样。

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

Answer 24

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

Answer 25

导航栏中的

navbar-fixed-top需要z-index = 1041 如果您使用bootstarp-combined.min.css，也会更改.navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Answer 26

我删除了模态背景。

.modal-backdrop {
    display:none;
}

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

Answer 27

将绝对位置更改为相对位置。

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

Answer 28

我浏览了我的 HTML 并发现我有一个未关闭的 <div> 标签。关闭 <div> 为我解决了这个问题。 PS：<div> 标签既不是模态的祖先也不是子代。

Answer 29

这对我有用：

value = tree.xpath('//option/@value[starts-with(.,'Employee')]')

Answer 30

我通过将下面的样式添加到DIV标签

来解决这个问题

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

添加自定义css

.modal-backdrop {position: relative;}

Answer 31

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

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

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

Answer 32

将这一个添加到您的页面。它适合我。

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

Answer 33

就我而言，我有一个包含以下内容的包装器：

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

只删除了z-index：1并且不知道为什么修复了这个问题。也确定删除了相对位置，但我需要它。

Answer 34

在我的情况下，原因是bootstrap.min.css :)一旦我从我的html文件中排除它作为参考，对话框以模态阴影的形式显示：）

Answer 35

我有同样的问题，也检查了Muhd的答案。

但是，我的模态需要left，top属性，所以只需将固定位置更改为绝对位置即可。

.modal {
    position: absolute;
}

Answer 36

尝试覆盖从隐藏到可见的类.modal-open溢出值。

.modal-open {
    overflow: visible;
}

Answer 37

像Davide Lorigliola一样，我通过启动z-index来修复它： .modal-backdrop {z-index：-999999; }

不幸的是S.O.禁止我对他进行评论或投票，所以我不得不在另一个解决方案中这样说。

Answer 38

当存在未关闭的标记时，有时会发生此行为，尤其是未关闭的</div>。您可以查看模态所在的位置并确保所有标记都已正确关闭或更好，然后将div模式移动到靠近页面底部的位置，紧接着</body>标记封面

Answer 39

试试https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.0

Bootstrap Modal 3.3.0在主元素中生成模态背景，而之前它附加到body元素。

希望这有帮助。

Answer 40

检查CSS以查看是否有模糊和滤镜。我从CSS中删除了这段代码，该模式再次正常工作

.modal-open .main-wrapper {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

Answer 41

.modal-backdrop {
/* bug fix - no overlay */    
display: none;}

Answer 42

对于像我这样在不使用插件或主题的情况下将 Bootstrap 添加到 Wordpress 的人：

我在function.php文件中添加了引导 CSS 和 JS 。然后，在wordpress页面中称为modal。无论我做什么，.modal-backdrop始终处于#mymodal的边缘。我发现这是一个 z-index 问题，但是由于#mymodal是在content div内部生成的，而.modal-backdrop是在<body>的末尾生成的，z-index无法正常工作。我所做的就是将#mymodal生成后也移到末尾：

$(document).ready(function () {
   $('#mymodal').on('shown.bs.modal', function () {
       $('#mymodal').appendTo(document.body);
     })
});

顺便说一句，我不得不在shown.bs.modal内添加$(document).ready，因为当我按下按钮时并没有调用它。

Answer 43

您可以制作解决方法，但这会从所有页面中删除淡入淡出。模态将像fb弹出窗口一样弹出。打开模态后尝试

 $('.modal-backdrop').removeClass('modal-backdrop');

Answer 44

对于大多数人来说，当您将模式代码放在HTML的其他部分中而不是在HTML的末尾时，就会发生此问题。而且绝对不可能将所有模式放在Html的末尾，特别是如果我们正在做一个单页应用程序时。因此，我要解决的是在模态开口处从主体上移除背景，并将其附加到模态上方的div。

$("#theModal").on('show.bs.modal', function(){
    setTimeout(() => {
      let modalBackdrop = $(".modal-backdrop");
      $(".modal-backdrop").remove();
      $("#anyDivAboveTheModal").append(modalBackdrop);
    }, 100);
  });

添加了超时以确保在实际加载背景幕之后执行该操作。

Answer 45

将不透明度设为1

.modal{
opacity:1;    
}

Answer 46

解决方案是将模式直接置于body标签下。如果由于某种原因无法实现，则只需添加overflow: visible属性以标记该模式。或仅使用以下代码：

<script>
    $(document).on('show.bs.modal', '.modal', function () {
        $('.div-wrapper-for-modal').css('overflow', 'visible');
    });

    $(document).on('hide.bs.modal', '.modal', function () {
        $('.div-wrapper-for-modal').css('overflow', 'auto');
    });
</script>
<div class="div-wrapper-for-modal">
    <div class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
</div>

Answer 47

我仅在iOS设备上遇到过类似的问题。

解决方案是从父级元素

中删除-webkit-overflow-scrolling: touch

Answer 48

尝试将此代码转换为CSS。

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }

例如：

    $(window).on('load', function() {
      
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });

    });

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid red;
}

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Bootstrap 3 Template</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">


</head>
<body class="modal-open">
    <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>

    <p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>

    <p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>

    <p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>

    <p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>    
    
    
<div class="my-module">
    This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
</div>
</div>
</body></html>

Answer 49

我只是删除了位置：来自_modal.scss文件的固定样式，它似乎对我来说很好。我仍然有背景，它按预期工作。

// Modal background
.modal-backdrop {
  /* commented out position: fixed - bug fix */
  //position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

感谢Rick Strahl的指导：https://weblog.west-wind.com/posts/2016/Sep/14/Bootstrap-Modal-Dialog-showing-under-Modal-Background

Answer 50

根据之前的答案，这可能有几个原因对我来说，问题是在不知情的情况下引用了两个不同的Bootstrap链接，因此删除其中一个可以解决问题。

在我的情况下，我包括了这个：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

和我已经在我的笔记本电脑中的另一个离线版本。

Answer 51

function addclassName(){
    setTimeout(function(){
        var c = document.querySelectorAll(".modal-backdrop");
        for (var i = 0; i < c.length; i++) {
            c[i].style.zIndex =  1040 + i * 20  ;
        }
        var d = document.querySelectorAll(".modal.fade");
        for(var i = 0; i<d.length; i++){
            d[i].style.zIndex = 1050 + i * 20;
        }
    }, 10);
}

Answer 52

我在使用Sharepoint 2013的Iphone和Ipad上遇到了这样的问题模态引导程序可以保留背景的z-index问题。

我只是在JS上使用它：

＆＃13;

$('#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);
});

＆＃13;

Answer 53

拥有

transform:translate3d(0, 0, 0);

在任何祖先元素上也可能导致这种情况。在 bootstrap 4.6.0 上测试。

Answer 54

对于角：

($('.modal-backdrop') as any).remove();

Answer 55

关注身体时要小心！

这肯定会从背景幕后得到那个模态：

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

但是，每次打开它时，这会向身体添加另一个模态，这会在添加控件（如gridviews）以及更新面板中的模态和更新时导致头部疼痛。因此，您可以考虑在模态关闭时将其删除：

例如：

$(document).on('hidden.bs.modal', function () {
        $('.modal').remove();
    });

将删除添加的模态。（当然这是一个例子，你可能想要使用你添加到模态中的另一个类名。）

正如其他人已经说过的那样;你可以简单地关闭模态的后退（data-backdrop =＆＃34; false＆＃34;），或者如果你不能在没有屏幕变暗的情况下生活，你可以调整.modal-backdrop css类（或者增加z指数。

Answer 56

我发现通过添加内联样式标记来设置“display：none”可以防止出现此问题。代码的位置没有任何影响。

Answer 57

删除在引导程序CSS中设置为黑色的模态背景背景

见我的：

.modal-backdrop {
    position: fixed; /*---- commented and it shows */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    /*background-color: #000000; */
}

然后添加o.5的背景颜色和不透明度。见我的：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030; 
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;

}

注意：虽然这些更改是在boostrap css中进行的，但我使用了angular-strap而且我没有下载或使用ng-animate css

Answer 58

将此添加到您的样式表：

.modal-backdrop {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0 !important;
}

Bootstrap模态出现在背景下

58 个答案: