Bootstrap модальное получение затемнения из-за позиционированной navbar

когда мой модальный загрузчик показан, похоже, что он находится за черным фоном. Щелчок в любом месте экрана заставляет модальный уйти.

проблема, похоже, вызвана позиционированием моего navbar-removing position: absolute; или position: relative; фиксирует его. К сожалению, поскольку мне нужно использовать Z-индекс на шапку, я не могу избавиться от позиционирования.

почему позиционирование navbar вызывает затемнение модального? Есть ли способ заставить модальное появиться в перед фоном, сохраняя позиционирование на навигационной панели?

10
css html positioning twitter-bootstrap

2 ответов

это потому, что ваш модальный находится внутри вашего #nav_inner <div> таким образом, он унаследует некоторый стиль, который вы не хотите.

это не должно быть там.

попробуйте переместить его в тело, как показано ниже:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
    <div class="gutter" id="left_gutter"></div>
    <div class="gutter" id="right_gutter"></div>
    <div id="container">
        <div class="navbar">
            <div id="nav_inner">
                <div class="page" id="nav_page">
                    <div class="content_wrapper">
                        <div class="content">
                    <a href="#add_topic_modal" role="button" data-toggle="modal" id="teach">Teach</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footer_inner">
        </div>
    </div>
                    <div class="modal hide fade" id="add_topic_modal" tabindex="-1" role="dialog" aria-labelledby="add_lesson_label" aria-hidden="true">
                        <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                             <h3 id="add_lesson_label">Teach</h3>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                        </div>
                     </div>
</body>
</html>

обновление: Это одна из тех проблем, когда я знал, что изменение позиции элемента в DOM исправит ее, но понимание причины-это совсем другая проблема.

удаление position: relative; z-index: 2; как #navbar и #nav_inner также устраняет проблему, поэтому, хотя модальный имеет position: fixed; z-index: 1050; где z-индекс работает только с позицией, а фиксированная позиция помещает элемент, расположенный относительно окна браузера, это все еще не работает из-за родительского элемента, имеющего относительную позицию и Z-индекс... магия.

причина, по которой выцветший фон появился выше, заключалась в том, что он добавляется в тело с помощью javascript, поэтому у него не было проблем с применением правильного Z-индекса 1040 и был помещен над модала.

13

У меня была та же проблема. Но поскольку мой контент был загружен ajax, я не смог создать "модальный" перед закрытием

Итак, я сделал это:

$(function(){
  $("#add_topic_modal").appendTo("body");
});

и теперь "модальный" работает так, как ожидалось.

7