CSS-坐在背景后面的Bootstrap Modal

所以我遇到的问题与@Jamescoo几乎完全相同,但是我认为我的问题出在我已经放置了几个DIV来创建滑动导航面板这一事实。

这是我复制的确切设置:[http://jsfiddle.net/ZBQ8U/2/]

奖励:如果您愿意,可以随意获取滑动面板的代码:)

z索引不应冲突,并且它们的值将表明它们正确堆叠,但从视觉上看,它们不是正确的。

单击“打开模态”按钮后,<div class="modal-backdrop fade in"></div>涵盖了所有内容! (您必须重新运行代码以将其重置)

我不知道该如何补救...有什么想法吗?

27个解决方案
109 votes

只需将整个模态移到其余代码的最底部即可。 它不需要嵌套在除主体之外的任何其他元素中。

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

演示版

他们在文档中暗示了这种解决方案。

模态标记放置
始终尝试将模式的HTML代码放在文档的顶级位置,以避免其他组件   影响模态的外观和/或功能。

Schmalzy answered 2020-01-13T17:36:16Z
26 votes

尽管z-index的z指数高于body div#fullContainer #content-wrap的z指数,但#ctrlNavPanel在其父级div #content-wrap中的z指数低于.modal-backdrop(z指数:1002与z指数:1030)。

因为父母的z指数低于z-index,所以不管给孩子的z指数如何,其所有内容都会落后于模态。

如果您删除了在body div#fullContainer #content-wrap#ctrlNavPanel上都设置的z-index,一切似乎都可以正常进行。

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

注意:我认为您可能最初在#content-wrap和#ctrlNavPanel上使用了z-indexes以确保导航位于后面,但这不是必需的,因为nav元素位于HTML中的content-wrap之前,因此您只 需要放置它们,而不是显式设置堆叠顺序。


编辑随着Schmalzy的到来,链接不再可单击。 这是因为整个容器的宽度为100%,因此可以覆盖导航。 解决此问题的最快方法是将导航置于该div中:

<div id="fullContainer">
  <aside id="ctrlNavPanel">
    <ul class="nav-link-list">
      <li><label>Menu</label></li>
      <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
      <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
      <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>
  </aside>
  <div id="content-wrap">
    ...
  </div>
</div>

此处演示

davidpauljunior answered 2020-01-13T17:37:01Z
22 votes

就我而言,我可以通过为.modal-backdrop添加CSS来解决此问题

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

尽管此方法可行,但窗体控件似乎仍显示在背景上方,单击任何位置均可关闭该模态,但效果并不理想。

对我来说,更好的解决方法是绑定到显示的事件(一旦页面被加载)并更正z-index属性。

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

在这种情况下,如果您可以更改显示的模式上的DOM:

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
jacoswarts answered 2020-01-13T17:37:34Z
12 votes

没有一个答案对我来说足够有效。问题似乎出在模态窗口需要位于人体外部的地方,这不是最好的

因此,这段代码完美地完成了这项工作:

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

$('#product_' + product_id + ' .modal ').insertAfter($('body'));
user109764 answered 2020-01-13T17:38:03Z
5 votes

在我的情况下,我的模态的父母之一是生气勃勃的

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

此处的阻止程序是animation-fill-mode: both;。我不能只将模态移动到外部,因此解决方案是将“动画填充模式”覆盖到animation-fill-mode: none;。动画仍然可以正常工作。

Eugene Shytik answered 2020-01-13T17:38:27Z
4 votes

几天来我一直在同一个问题作斗争...我找到了可能的解决方案,但我不知道这是最佳选择,如果有人告诉我,我将不胜感激。

修改将在bootstrap.css中

选项1:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

选项2:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

选项3:

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

我使用了选项2。

Lrodriguez84 answered 2020-01-13T17:39:09Z
4 votes

如果您确实不需要背景,请尝试将其移除(data-backdrop= "false"):

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>
Carlos Magno answered 2020-01-13T17:39:29Z
3 votes

我谨防将模态内容移到其原始上下文之外:其他JS或样式可能取决于该上下文。

但是,我怀疑是否有任何脚本或样式需要背景的特定上下文。

因此,我的解决方案是将背景移动到模态内容附近,并强制其进入相同的堆叠上下文:

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

与jacoswarts的解决方案仅略有差异,因此感谢您的启发!

Michael Crenshaw answered 2020-01-13T17:40:02Z
1 votes

解决此问题的另一种方法是,如果您不想修改bootstrap.css,则将2701123681681497121792添加到bootstrap-dialog.css文件中的.modal-backdrop类中。

Mihaela Rada answered 2020-01-13T17:40:22Z
1 votes

如果我们无法删除背景和/或我们拥有诸如角度或vue的组件框架,则无法将模态移至根。 我做到了这一点:将我的自定义模态背景容器(带有附加类)作为模态对话框容器的同级对象,并添加一些CSS

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

和CSS

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}
dimson d answered 2020-01-13T17:40:47Z
1 votes

您可以使用此:

<div
  class="modal fade stick-up disable-scroll"
  id="filtersModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="filtersModal"
  aria-hidden="false"
  style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>

Adding style="" and data-backdrop false would fix it.
Rishab Narang answered 2020-01-13T17:41:06Z
1 votes

对于使用ASP.NET MVC的用户,

需要将模态div移到</body>2016标记之前,但是不能这样做,因为您正在使用“布局”页面

在body标签之前的_Layout.cshtml文件中定义一个部分,例如:

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

然后在您看来

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

这样,模态HTML将在body标签之前呈现,并且模态现在应正确显示。

Kemal Emin answered 2020-01-13T17:41:44Z
0 votes

只需删除bootstrap.css;

从此文件bootstrap.css.modal-backdrop

user301153 answered 2020-01-13T17:42:08Z
0 votes

我错过了以下HTML

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

添加它并没有问题地工作

ncubica answered 2020-01-13T17:42:37Z
0 votes

由于我没有机会移动模式标记,因为我将其添加到有条件的部分模板中,所以对我有用的是添加CSS波纹管

.modal.fade {
    display: none;
}

然后,当通过js引导添加类“ in”时,应用display:block,一切正常。

Maxi answered 2020-01-13T17:43:01Z
0 votes

我发现在引导启动后应用离子框架(ionic.min.cs)为我解决了这个问题。

Chamika Goonetilaka answered 2020-01-13T17:43:21Z
0 votes

如果您不能将模态置于根(例如,如果您使用angular且模态位于控制器中),则修改引导程序或使用js显然是一个不好的解决方案。

因此,说您拥有自己的网站结构:

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

打开您的代码检查器,然后将模式移动到根目录,它应该可以正常工作(但是不希望出现):

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

现在将其放在第一个div中,并检查其是否正常工作;如果是,请检查下一个孩子,直到它不工作为止,然后找到问题所在的div;

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

一旦知道了哪个div是问题,就可以使用css的显示和位置进行操作。

每个人的结构都不同,但以我为例,将父母设置为display: table;

Sebastien Horin answered 2020-01-13T17:44:03Z
0 votes

将此代码放在您想要的任何地方

$('.modal').on('shown.bs.modal', function () {
    var max_index = null;
    $('.modal.fade.in').not($(this)).each(function (index , value){
        if(max_index< parseInt( $(this).css("z-index")))
            max_index = parseInt( $(this).css("z-index"));
    });
    if (max_index != null) $(this).css("z-index", max_index + 1);
});
Emre Abdullah Yavuz answered 2020-01-13T17:44:24Z
0 votes

很多时候,您无法将模态向外移动,因为这会影响您的设计结构。

背景位于您的模式上方的原因是ID,即父级已设置任何位置。

除了将模态移到外部之外,解决问题的一种非常简单的方法是在您拥有模态的情况下,将背景移到结构内部。 在您的情况下,可能是

$(".modal-backdrop").appendTo("main");

请注意,如果您的应用程序具有确定的结构,并且不能将模态向外移动,则该解决方案适用,因为它会违背设计结构

prajnavantha answered 2020-01-13T17:44:58Z
0 votes

只需将您的模态移到所有div内容之外,然后将其放置在主体关闭之前即可。

Bhushan Pawar answered 2020-01-13T17:45:18Z
0 votes

首先,请确保该模态不在任何父div中。然后加$('#myModal')。appendTo(“ body”)

对我来说很好。

Varunsai Kodumuri answered 2020-01-13T17:45:42Z
0 votes

除了这里的所有答案之外,我还发现bootstrap4“动画的fadingIn”也导致了此错误(背景后不可点击的模态):

检查您的模态是否在以下父标记中(引导动画)

<div class="animated fadeIn"></div>

我删除了此标签-为我解决了问题。

Christian Bieser answered 2020-01-13T17:46:15Z
0 votes

如果您使用JQuery,则可以使用appendTo()将模态附加到特定元素,在这种情况下,大多数情况下,简单的一行就可以将模态移到背景顶部,无论模态div的位置在哪里

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

这是JQuery appendTo函数的参考:[http://api.jquery.com/appendto/]

我更新了你的小提琴[http://jsfiddle.net/ZBQ8U/240/]

Joe Lu answered 2020-01-13T17:46:44Z
0 votes

这对我有用。

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $('#modalDecision');
    // also taken from bootstrap 3 docs
    $(element).on('shown.bs.modal', function (e) {
        // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
        var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
        $(element).append($(backDrop));
    });
Jeff Brose answered 2020-01-13T17:47:04Z
0 votes

我遇到了这个问题,在调查了CSS之后,主容器(身体的直接子代)有:

position: relative
z-index: 1

我删除了这两个属性后,背景效果很好。 如果主包装具有position: fixed,则可能还会遇到此问题。

Hassan ALAMI answered 2020-01-13T17:47:29Z
0 votes

我有一个类似的问题,即淡入淡出无法正常工作,并且覆盖层停留在页面上。我将动态内容添加回页面(仅对模态操作刷新某些内容)。我也有这个$('#rejectModal-'+ itemId).modal('hide')(itemId是单个页面中用于拒绝某些信息的多个模态的动态ID),但问题仍然没有消失。

由于部分布局中的布局未设置为null,因此叠加层得以保留设置此问题后,问题消失了:

@{ 
    Layout = null;
}
Dongolo Jeno answered 2020-01-13T17:47:54Z
0 votes

只需删除背景,将此代码插入您的css文件

.modal-backdrop {
      /* bug fix - no overlay */    
      display: none;    
}
Santos L. Victor answered 2020-01-13T17:48:14Z
translate from https://stackoverflow.com:/questions/20983110/bootstrap-modal-sitting-behind-backdrop