Bootstrap 模態 z-index

Question

問題是：我正在使用 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">注意它不會以這種方式獲得灰色背景，所以它有點骯臟的解決方案，很高興聽到更好的解決方案。

Answer 1

該問題幾乎總是與“嵌套”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 設置的位置。

Answer 2

我發現了這個問題，因為我有一個類似的問題。 雖然data-backdrop確實“解決”了這個問題； 我在我的標記中發現了另一個問題。

我有它推出這個模式和模態對話框本身是在頁腳的按鈕。 問題是頁腳被定義為navbar_fixed_bottom ，並且包含position:fixed 。

在我將對話框移到固定部分之外后，一切都按預期進行。

Answer 3

模態對話框可以通過覆蓋其 z-index 屬性來定位在頂部：

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

Answer 4

好吧，盡管這個條目很舊。 本周我正在使用引導程序的模態並遇到了這個“問題”。 我的解決方案以某種方式混合了一切，只是發布它，因為它可能對某人有所幫助:)

首先檢查 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方法與前一種方法基本相同，但沒有事件偵聽器。

希望它可以幫助某人！

Answer 5

我也有這個問題。 問題來自 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)

Answer 6

好的，所以如果您使用的是 bootstrap-rtl.css，您可以做的是轉到以下類.modal-backdrop並刪除z-index屬性。 之后一切都應該沒問題

Answer 7

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

需要添加一個覆蓋的 css 來糾正行為，

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

Answer 8

試試這個腳本：

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 9

通過向選項添加id: 'alertBox'為 vue 解決了這個問題，因此現在每個模態容器都將其父級設置為類似於alertBox__id0whatver ，可以使用 css 輕松更改：

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

（意味着如果 id 名稱包含 ( *= ) 'alertBox' 它將被應用。

Answer 10

 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>

Bootstrap 模態 z-index

問題描述

編輯

10 個解決方案

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

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

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

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

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

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

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

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

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

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

Bootstrap 模態 z-index

問題描述

編輯

10 個解決方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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