堆栈内存溢出
  繁体   English   中英

Bootstrap 模态 z-index

[英]Bootstrap modal z-index

 原文  2013-11-11 22:14:36  3   10    javascript/ jquery/ html/ css/ twitter-bootstrap

问题描述

问题是：我正在使用 parrallx 滚动，所以当我尝试通过 Bootstrap 弹出框模式时，我现在在页面中有 z-index 我让他看起来像这样https://www.dropbox.com/s /42tzvfppj4vh4vx/截图%202013-11-11%2020.38.36.png

如您所见，框模式不在顶部，任何鼠标单击都会禁用它。 如果我禁用此 css 代码：

#content {
    color: #003bb3;
    position: relative;
    margin: 0 auto;
    width: 960px;
    z-index: 300;
    background: url('../images/parallax-philosophy-ltl.png') top center;
}

框模态有效。 请注意，Bootstrap default.modal 是 z-index:1050，所以我不明白为什么它不在所有其他上下文之上。

那是盒子模态：

   <section id="launch" class="modal hide fade">
    <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>אשר הגעה לחתונה  </h3>
    </header>
    <div class="modal-body">
        <form method="post" action="/update" id="myForm2">
            <input type="radio"  id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
            <p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
            <p>כמה אנשים מגיעים?   </p>
            <select name="number" id="number">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>

            </select>
            <hr/>
            <input type="hidden" name="title" id="title" value="{{title}}">
            <input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
            <p>סיבה לאי הגעה</p>
            <input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
            <hr/>
            <p class="submit"><input type="submit" name="submit" value="שלח"></p>

        </form>
    </div>
    <footer class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </footer>
</section>

我从顶部菜单触发他：

  <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>

提前谢谢。

编辑

如果有人遇到同样的问题，则找到解决方案。 这是方法：将 data-backdrop="false" 添加到包含模态的部分或 div，例如： <section id="launch" class="modal hide fade in" data-backdrop="false">注意它不会以这种方式获得灰色背景，所以它有点肮脏的解决方案，很高兴听到更好的解决方案。

10 个解决方案

解决方案1
 40  2014-06-13 18:25:57

该问题几乎总是与“嵌套”z-index 相关。 举个例子：

<div style="z-index:1">
  some content A
  <div style="z-index:1000000000">
    some content B
  </div>
</div>
<div style="z-index:10">
  Some content C
</div>

如果仅查看 z-index，您会期望 B、C、A，但由于 B 嵌套在明确设置为 1 的 div 中，因此它将显示为 C、B、A。

设置 position:fixed 会锁定该元素及其所有子元素的 z-index，这就是更改它可以解决问题的原因。

解决方案是找到设置了 z-index 的父元素，然后调整设置或移动内容，使图层及其父容器按照您想要的方式堆叠。 Firefox 中的 Firebug 在最右侧有一个名为“Layout”的选项卡，您可以快速上移父元素并查看 z-index 设置的位置。

解决方案2
 17  2013-12-26 15:33:57

我发现了这个问题，因为我有一个类似的问题。 虽然data-backdrop确实“解决”了这个问题； 我在我的标记中发现了另一个问题。

我有它推出这个模式和模态对话框本身是在页脚的按钮。 问题是页脚被定义为navbar_fixed_bottom ，并且包含position:fixed 。

在我将对话框移到固定部分之外后，一切都按预期进行。

解决方案3
 13  2016-12-20 21:51:11

模态对话框可以通过覆盖其 z-index 属性来定位在顶部：

.modal.fade {
  z-index: 10000000 !important;
}

解决方案4
 5  2017-04-11 08:34:34

好吧，尽管这个条目很旧。 本周我正在使用引导程序的模态并遇到了这个“问题”。 我的解决方案以某种方式混合了一切，只是发布它，因为它可能对某人有所帮助:)

首先检查 Z-index 战争以在那里得到修复！

您可以做的第一件事是停用模态背景，我之前有过 Stackoverflow 帖子，但我丢失了它，所以我不会为此归功于它，请记住这一点； 但它在 HTML 代码中是这样的： 

 <!-- from the bootstrap's docs --> <div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false"> <!-- mind the data-backdrop="false" --> <div class="modal-dialog" role="document"> <!-- ... modal content --> </div> </div>

第二种方法是将事件侦听器附加到引导程序显示的模态事件。 这在某种程度上并不像您想象的那么漂亮，但也许您自己的一些技巧可能会奏效。 这样做的好处是元素附加了事件侦听器，只要附加了事件侦听器，就可以完全忘记它:) 

 var element = $('selector-to-your-modal'); // 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 = $('.modal-backdrop'); $(element).append($(backDrop)); });

second.1方法与前一种方法基本相同，但没有事件侦听器。

希望它可以帮助某人！

解决方案5
 2  2016-01-11 18:44:43

我也有这个问题。 问题来自 html，由 bootstrap js 创建：

<div class="modal-backdrop fade in"></div>

该行直接在<body>元素结束之前创建。 这会导致“z-index 堆叠元素问题”。 我相信 bootstrap .js 创建这个元素是错误的。 如果您在 mvc 布局页面中，此脚本仍会导致相同的问题。 更好的 js 想法是获取目标模态 id 并将此行注入 html 之前...

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

解决方案是修复 bootstrap.js - 模态的一部分：

.appendTo(this.$body)  
//REPLACE TO THIS:
 .insertBefore(this.$element)

解决方案6
 1  2017-05-19 18:19:16

好的，所以如果您使用的是 bootstrap-rtl.css，您可以做的是转到以下类.modal-backdrop并删除z-index属性。 之后一切都应该没问题

解决方案7
 1  2018-02-06 06:44:05

我在使用 JQLayout 插件时陷入了这一困境，尤其是在 Bootstrap 4 中使用嵌套布局和模式时。

需要添加一个覆盖的 css 来纠正行为，

.pane-center{
    z-index:inherit !important;
}

解决方案8
 0  2017-08-29 10:12:13

试试这个脚本：

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

}

解决方案9
 0  2019-12-18 11:13:03

通过向选项添加id: 'alertBox'为 vue 解决了这个问题，因此现在每个模态容器都将其父级设置为类似于alertBox__id0whatver ，可以使用 css 轻松更改：

div[id*="alertBox"] { background: red; }

（意味着如果 id 名称包含 ( *= ) 'alertBox' 它将被应用。

解决方案10
 0  2022-03-13 09:18:45

 function ShowGroupModal() { $('#dvGroupInfoPopup').removeClass("fade"); return false; } function GroupModelReset() { $('#txtGroupName').val(""); $('#dvGroupInfoPopup').addClass("fade"); return false; } function SaveClientDetails() { if($('#txtName').val() == "") { alert("Please enter Client Name"); $('#txtName').focus(); return false; } else { alert("Client information successfully saved."); return false; } } function SaveGroup() { if($('#txtGroupName').val() == "") { alert("Please enter Group Name"); $('#txtGroupName').focus(); return false; } else { alert("Group information successfully saved."); return false; } }
 .fade {display:none;}.show {display:block;}.modalParentBox { z-index: 10040;important.}:modalChildBox { z-index; 10042 !important;}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:--Parent Modal--> <div class="modal show modalParentBox" id="idModalAddClient" data-bs-backdrop="static" tabindex="1" aria-labelledby="ModalAddClientLabel" aria-modal="true" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content border-top border-0 border-4 border-primary"> <div class="modal-header"> <h5 class="modal-title" id="ModalAddClientLabel"></h5> <div> <i class="bx bxs-user me-1 font-22 text-primary"></i> </div> <h5 id="idH5AddUpdateClientHeader" class="mb-0 text-primary">Add Client</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-xl-12 mx-auto"> <div class="border p-3 rounded"> <div class="row mb-3"> <label for="ddlGroupToAddClient" class="col-lg-4 col-form-label"><span class="text-danger">* </span>Group <b>:</b></label> <div class="col-lg-8"> <div class="input-group"> <select class="form-select" id="ddlGroupToAddClient"> <option selected="selected" value="-1">-- Select Group --</option> </select> <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#dvGroupInfoPopup" onclick="ShowGroupModal()">Add Group</button> </div> <span id="idSpnClientTypeError" name="nameSpnForClearAddClientError" class="text-danger small fw-bold"></span> </div> </div> <div class="row mb-3"> <label for="txtName" class="col-lg-4 col-form-label"><span class="text-danger invisible">* </span>Client Name <b>:</b></label> <div class="col-lg-8"> <input type="text" class="form-control" id="txtName" maxlength="150"> <span id="idSpnCompanyNameError" name="nameSpnForClearAddClientError" class="text-danger small fw-bold"></span> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button id="idBtnSaveClient" type="button" class="btn btn-sm btn-primary" onclick="SaveClientDetails()">Save</button> <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cancel</button> </div> </div> </div> </div> <!--Child Popup Modal--> <div id="dvGroupInfoPopup" class="modal fade modalChildBox" tabindex="2" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="dvGroupInfoPopupLabel">Add Group</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="GroupModelReset()"></button> </div> <div class="modal-body"> <div class="row mb-2"> <div class="col-lg-5"> <label for="txtGroupName" class="form-label">Group Name:<span class="text-danger">*</span></label> </div> <div class="col-lg-7"> <input id="txtGroupName" type="text" maxlength="150" class="form-control" autocomplete="off" required /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-success btn-sm" onclick="SaveGroup()">Save Group</button> <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal" aria-label="Close" onclick="GroupModelReset()">Cancel</button> </div> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导模态内的CSS伪元素z-index Magento 2 模态 z-index 负z-index在模态内不起作用 Datepicker：模态上的Datepicker（z索引） 您可以为模态窗口（使用Twitter-Bootstrap）提供z-index吗？ 如何修复 Bootstrap 中的 z-index 问题？ Bootstrap 4-光泽效果和Z索引 z-index不适用于在react中创建的模态且模态未显示在顶部 带有模式对话框的jQuery键盘z-index问题 Bootstrap Popover在Popup模式下不起作用（不是z-index）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM