it-swarm.com.ru

Bootstrap модальный Z-индекс

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

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

24
Dagan Bog-Computers

Проблема почти всегда связана с «вложенными» 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.

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

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

26
Jon

Я нашел этот вопрос, так как у меня была похожая проблема. Хотя data-backdrop «решает» проблему; Я нашел еще одну проблему в моей разметке.

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

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

15
Sam Ruby

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

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

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

Сначала проверьте войну 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>

Подход second заключался в том, чтобы подключить прослушиватель событий к показанному модальному событию начальной загрузки. Это как-то не так красиво, как вы можете подумать, но, возможно, некоторые ваши собственные трюки могут как-то сработать. Преимущество этого заключается в том, что элемент присоединяет прослушиватель событий, и вы можете полностью забыть об этом, если к нему подключен прослушиватель событий :)

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 в основном такой же, как и предыдущий, но без прослушивателя событий.

Надеюсь, это поможет кому-то!

3
Arnulfo Solis Ramirez

У меня тоже была эта проблема . Проблема исходит из HTML, созданного загрузчиком JS:

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

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

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

SO SOLUTION IS восстанавливает bootstrap.js - часть модальной части:

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

Попробуйте этот скрипт:

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

}

0
kunal singh

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

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

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

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

0
Mohammed Nafie