Загрузочный модальный z-индекс

Проблема в том, что я использую прокрутку parrallx, поэтому у меня теперь есть z-index на странице, когда я пытаюсь открыть мод-бокс с помощью Bootstrap, я заставляю его выглядеть так: https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

Как видите, box-модал не находится сверху, и любой щелчок мышью отключает его. если я отключу этот код CSS:

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

коробка модальная работает. просто чтобы заметить, Bootstrap по умолчанию.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-background = "false" в раздел или div, в котором содержится модальное значение, например: <section id="launch" class="modal hide fade in" data-backdrop="false"> обратите внимание, что он не получает серый фон таким образом, так что это своего рода грязное решение, будет рад услышать о лучшем.

Ответы

Ответ 1

Проблема почти всегда имеет какое-то отношение к "вложенным" z-индексам. В качестве примера:

<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-индекс, вы должны ожидать B, C, A, но поскольку B вложен в div, который явно установлен в 1, он будет отображаться как C, B, A.

Позиция установки: фиксированная блокирует z-индекс для этого элемента и всех его дочерних элементов, поэтому изменение может решить проблему.

Решение состоит в том, чтобы найти родительский элемент, который имеет набор z-index, и либо отрегулировать настройку, либо перемещать содержимое, чтобы слои и их родительские контейнеры складывались так, как вы хотите. Firebug в Firefox имеет вкладку в правом углу с именем "Макет", и вы можете быстро подойти к родительским элементам и посмотреть, где установлен z-индекс.

Ответ 2

Я нашел этот вопрос, поскольку у меня была аналогичная проблема. Пока data-backdrop "решает" проблему; Я нашел еще одну проблему в моей разметке.

У меня была кнопка, которая запустила этот модальный режим, и модальный диалог был в нижнем колонтитуле. Проблема заключается в том, что нижний колонтитул был определен как navbar_fixed_bottom и содержал position:fixed.

После того, как я переместил диалоговое окно вне фиксированного раздела, все работало, как ожидалось.

Ответ 3

Модальное диалоговое окно можно позиционировать сверху, переопределив его свойство z-index:

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

Ответ 4

Хорошо, несмотря на то, что эта запись очень старая. На этой неделе я использовал bootstrap modal и пришел по этой "проблеме". Мое решение было каким-то образом сочетанием всего, просто разместив его, поскольку это может помочь кому-то:)

Сначала проверьте войну Z-index, чтобы получить там исправление!

первая вещь, которую вы можете сделать, - это деактивировать модальный фон, раньше у меня была запись Stackoverflow, но я ее потерял, поэтому я не беру на себя ответственность за это, помните об этом; но он выглядит следующим образом в HTML-коде:

<!-- from the bootstrap 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>

Ответ 5

У меня тоже была эта проблема. Проблема возникает из html, созданного bootstrap js:

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

Эта строка создается непосредственно перед концом элемента <body>. Это приводит к возникновению проблемы с элементом-элементом в z-index. Я считаю, что bootstrap.js делает создание этого элемента неправильным. Если у вас на странице макета mvc, этот script вызовет по-прежнему ту же проблему. Идея Beter js вырезана для того, чтобы получить целевой идентификатор модальности и ввести эту строку в html раньше...

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

SO SOLUTION Реставрация bootstrap.js - часть модального:

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

Ответ 6

ok, поэтому, если вы используете bootstrap-rtl.css, что вы можете сделать, это перейти к следующему классу .modal-backdrop и удалите атрибут z-index. после этого все должно быть хорошо

Ответ 7

Попробуйте выполнить Script:

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

}

Ответ 8

Я попал в это с помощью плагина JQLayout, особенно при использовании вложенных макетов и модалов с Bootstrap 4.

Для исправления поведения необходимо добавить переопределить CSS

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

Ответ 9

Я хотел бы изменить основные файлы. Ответ от Сэма Руби самый элегантный в этом отношении. После перемещения действующего модального кода в головной части проблема была решена.