javascript - Bootstrap 模态出现在背景下

Question

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

任何想法为什么会这样或我能做些什么来解决这个问题？

score 718 · Accepted Answer

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

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

这里有几种方法可以做到这一点：

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

score 454 · Accepted Answer

问题与父容器的定位有关。在显示之前，您可以轻松地将模态从这些容器中“移出”。如果您正在show使用 js 编写模态框，请执行以下操作：

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

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

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

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

score 185 · Accepted Answer

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

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

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

score 153 · Accepted Answer

另外，请确保 BootStrap css 和 js 的版本相同。不同的版本也可以让modal出现在背景下：

例如：

坏的：

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

score 125 · Accepted Answer

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

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

score 66 · Accepted Answer

我通过在打开模式窗口后为模式窗口提供高 z-index 值来使其工作。例如：

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

score 41 · Accepted Answer

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

score 18 · Accepted Answer

这将涵盖所有模式，而不会弄乱任何动画或预期的行为..

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

score 16 · Accepted Answer

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

    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 - 模式在使用固定侧边栏时消失在背景下方以获取详细信息。

score 15 · Accepted Answer

我找到的最简单的解决方案，适用于我的所有案例，是类似帖子中的答案：

这里是：

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

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

感谢@Jevin O. Sewaruth 发布原始答案。

score 10 · Accepted Answer

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

.modal-backdrop看起来像这样

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

score 10 · Accepted Answer

只需添加两行 CSS：

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

.modal-backdrop 应该有 1050 值以将其设置在导航栏上。

score 9 · Accepted Answer

我只是设置：

#myModal {
    z-index: 1500;
}

它有效....

对于原始问题：

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

score 8 · Accepted Answer

8

在您的模态中使用它：

data-backdrop="false"

于 2015-05-14T10:14:23.180 回答

score 8 · Accepted Answer

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

score 8 · Accepted Answer

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

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

score 6 · Accepted Answer

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

score 6 · Accepted Answer

上面建议的解决方案都不适合我，但这种技术解决了这个问题：

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

score 6 · Accepted Answer

我遇到了这个问题，最简单的解决方法是在模态对话框 div 上添加大于 1040 的 z-index：

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

我相信 bootstrap 创建一个 div modal-backdrop 淡入淡出，在我的例子中，z-index 为 1040，所以如果你把 modal-dialog 放在上面，它不应该再变灰了。

score 6 · Accepted Answer

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

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

.....

score 5 · Accepted Answer

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

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

.modal {
    z-index: 1101;
}

score 5 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

这对我有用：

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

score 3 · Accepted Answer

我删除了模态背景。

.modal-backdrop {
    display:none;
}

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

我发现的是：

在 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)

score 3 · Accepted Answer

3

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

于 2016-01-03T23:43:12.913 回答

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

我通过将下面的样式添加到 DIV 标签来解决这个问题

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

并添加自定义 css

.modal-backdrop {position: relative;}

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

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

只删除了 z-index:1 并且不知道为什么解决了这个问题。也肯定会删除相对位置，但我需要它。

score 2 · Accepted Answer

就我而言，原因是 boostrap.min.css。一旦我将它作为参考从我的 HTML 文件中排除，对话框就会显示在模态阴影的前面。

score 2 · Accepted Answer

2

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

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

于 2015-03-19T02:38:57.130 回答

score 2 · Accepted Answer

像 Davide Lorigliola 一样，我通过提高 z-index 来修复它：

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

score 2 · Accepted Answer

最简单的解决方案是将模态对话框移到任何容器之外，并在<body>元素下声明它：

<body>    
    <div>
        ...
    <div>
    
    
    <div class="modal">
        ... modal dialog here
    </div>
</body>

我已经尝试过这个解决方案，它对我有用。

来源：https ://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

score 1 · Accepted Answer

当有一个未关闭的标签，尤其是一个未关闭的标签时，有时会发生这种行为</div>。您可以查看您的模态框所在的位置，并确保所有标签都正确关闭或更好地将 div 模态框移到更靠近页面底部的位置，紧接在</body>标签外壳之前

score 1 · Accepted Answer

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

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

.modal {
    position: absolute;
}

score 1 · Accepted Answer

附着在身体上时要小心！

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

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

但是，这会在您每次打开正文时向正文添加另一个模态，当在更新面板中添加带有编辑和更新的网格视图等控件到模态时，这可能会导致头痛。因此，您可以考虑在模态关闭时将其删除：

例如：

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

将删除添加的模态。（当然这是一个示例，您可能希望使用添加到模式中的另一个类名）。

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

score 1 · Accepted Answer

我只是从 _modal.scss 文件中删除了 position: fixed 样式，它似乎对我来说很好用。我仍然有背景，它按预期工作。

// 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 在“在模式背景下显示的引导模式对话框”中的指导。

score 1 · Accepted Answer

我只对 iOS 设备有类似的问题。

解决方案是-webkit-overflow-scrolling: touch从父元素中删除

score 1 · Accepted Answer

检查你的 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);
}

score 0 · Accepted Answer

0

尝试从to覆盖类.modal-open溢出值：hiddenvisible

.modal-open {
    overflow: visible;
}

于 2013-08-09T23:19:53.480 回答

score 0 · Accepted Answer

您可以制定一种解决方法，但这将消除所有页面的淡入淡出。该模式将像 Facebook 弹出窗口一样弹出。打开模态后尝试：

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

score 0 · Accepted Answer

我在使用 Sharepoint 2013 Modal bootstrap 的 Iphone 和 Ipad 上遇到了这样的问题，让 z-index 问题与背景保持一致。

我只是在 JS 上使用它：

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

就我而言，我包括了这个：

<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">

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

score 0 · Accepted Answer

解决方案是将模态直接放在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…&lt;/p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
</div>

score 0 · Accepted Answer

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

我在文件中添加了引导CSS和JS 。function.php然后，在 wordpress 页面中调用模态。不管我做什么，.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因为当我按下按钮时它没有被调用。

score 0 · Accepted Answer

0

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

于 2020-06-07T19:23:14.680 回答

score 0 · Accepted Answer

有

transform:translate3d(0, 0, 0);

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

score -1 · Accepted Answer

-1

将不透明度设为 1

.modal{
opacity:1;    
}

于 2019-12-02T12:38:35.527 回答

score -2 · Accepted Answer

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

score -2 · Accepted Answer

试试这个代码到 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…&lt;/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>

score -2 · Accepted Answer

-2

对于角：

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

于 2021-05-06T13:22:26.367 回答

score -3 · Accepted Answer

删除引导 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

score -4 · Accepted Answer

将此添加到您的样式表中：

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

javascript - Bootstrap 模态出现在背景下

58 回答 58

Related

Reference