Bootstrap Модальное сидение за фоном

Итак, у меня почти такая же проблема, как @Jamescoo, но я думаю, что моя проблема исходит из того, что я уже позиционировал пару DIV для создания скользящей навигационной панели.

Здесь моя точная настройка реплицирована: http://jsfiddle.net/ZBQ8U/2/

BONUS: Не стесняйтесь брать код для скользящей панели, если хотите:)

Z-индексы не должны конфликтовать, и их значения показывают, что они правильно стекируются, но визуально они не являются.

Как только вы нажмете кнопку "Open Modal", <div class="modal-backdrop fade in"></div> охватывает все! (вам нужно будет повторно запустить код до reset it)

Я не знаю, как это исправить... Любые идеи?

Ответы

Ответ 1

Просто переместите весь модальный внешний код остальной части вашего кода, до самого низа. Его не нужно вставлять в какой-либо другой элемент, кроме тела.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Демо

Они намекают на это решение в документации.

Размещение модальной разметки
Всегда старайтесь размещать модальный код HTML в позиции верхнего уровня в документе, чтобы избежать других компонентов влияя на внешний вид и/или функциональность.

Ответ 2

Хотя z-индекс .modal выше, чем у .modal-backdrop, то .modal находится в родительском div #content-wrap, который имеет более низкий z-индекс, чем .modal-backdrop (z-index: 1002 vs z-index: 1030).

Поскольку у родителя есть более низкий z-индекс, чем .modal-backdrop, все в нем будет за модальным, независимо от любого z-индекса, данного для детей.

Если вы удалите z-index, который вы установили как в body div#fullContainer #content-wrap, так и в #ctrlNavPanel, все работает нормально.

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

ПРИМЕЧАНИЕ. Я думаю, что вы, возможно, изначально использовали z-индексы в # content-wrap и #ctrlNavPanel, чтобы гарантировать, что навигатор сидит позади, но это не обязательно, потому что элемент nav предшествует обертке содержимого в HTML, поэтому вам нужно только расположить их, а не явно задавать порядок стекирования.

ИЗМЕНИТЬ Когда Шмальзи поднялся, ссылки перестали быть доступными. Это связано с тем, что полный контейнер имеет ширину 100% и поэтому охватывает навигацию. Самый быстрый способ исправить это - разместить навигацию внутри этого div:

<div id="fullContainer">
  <aside id="ctrlNavPanel">
    <ul class="nav-link-list">
      <li><label>Menu</label></li>
      <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
      <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
      <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>
  </aside>
  <div id="content-wrap">
    ...
  </div>
</div>

ДЕМО ЗДЕСЬ

Ответ 3

В моем случае я мог бы исправить это, добавив css для .modal-backdrop

.modal-backdrop {
  z-index: -1;
}

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

Лучшим обходным решением для меня является привязка к показанному событию (после загрузки страницы) и исправление свойства z-index.

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

В этом случае, если вы в порядке с изменением DOM по модальному изображению:

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

Ответ 4

Ни один из ответов не работал достаточно хорошо для меня. Проблема оказалась в том, что модальные окна должны быть вне тела. И это не лучше

Итак, этот код выполнил задание только префект:

$('.modal ').insertAfter($('body'));

Ответ 5

В моем случае один из родителей моего модала был анимирован и имел это

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

Блокатор здесь - animation-fill-mode: both; , Я не мог просто переместить модал наружу, поэтому решение было переопределить 'animation-fill-mode' на animation-fill-mode: none; , Анимация все еще работала нормально.

Ответ 6

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

изменения будут в bootstrap.css

Вариант 1:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

Вариант 2:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

Вариант 3:

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

Я использовал опцию 2.

Ответ 7

Попробуйте удалить фон, если он вам действительно не нужен (data-backdrop= "false"):

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>

Ответ 8

Я осторожен с перемещением модального содержимого за пределы его исходного контекста: другие JS или стили могут зависеть от этого контекста.

Однако я сомневаюсь, что есть какие-либо сценарии или стили, которые требуют определенного контекста для фона.

Поэтому мое решение состоит в том, чтобы переместить фон, смежный с модальным контентом, и перенести его в тот же контекст стека:

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

Это лишь небольшое отклонение от решения jacoswarts, так что спасибо за вдохновение!

Ответ 9

Другим решением этой проблемы является добавление класса z-index: 0; в .modal-backdrop в файл bootstrap-dialog.css, если вы не хотите изменять bootstrap.css.

Ответ 10

если мы не можем удалить фон и/или у нас есть инфраструктура компонента, такая angular или vue, мы не можем перенести модальный на корень. Я сделал этот трюк: поставьте мой собственный контейнер для модального фона (с классом aditional) как родственный для модального диалогового контейнера и добавьте некоторый css

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

и css

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}

Ответ 11

Вы можете использовать это:

<div
  class="modal fade stick-up disable-scroll"
  id="filtersModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="filtersModal"
  aria-hidden="false"
  style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>

Adding style="" and data-backdrop false would fix it.

Ответ 12

Для тех, кто использует ASP.NET MVC,

Необходимо переместить модальный div непосредственно перед тегом </body>, но не может этого сделать, потому что вы используете страницу Макет

Определите раздел в файле _Layout.cshtml непосредственно перед тегом body, например:

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

Затем на ваш взгляд

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

Таким образом, модальный HTML будет отображаться перед тегом body, а модальный теперь должен отображаться правильно.

Ответ 13

просто удалите z-index: 1040;

из этого файла bootstrap.css class .modal-backdrop

Ответ 14

Мне не хватало следующего html

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

добавил и работал без проблем

Ответ 15

Так как у меня нет возможности переместить модальную разметку, так как я добавил ее в частичный шаблон в рамках условного, что сработало для меня, добавьте CSS ниже

.modal.fade {
    display: none;
}

Затем, когда boostrap добавляет класс "in" через js apply display: block и все работает отлично.

Ответ 16

Я обнаружил, что при использовании ионного каркаса (ionic.min.cs) после бутстрэпа я провожу эту проблему для меня.

Ответ 17

Если вы не можете поместить модальный корневой каталог (если используется angular, а модальный - в контроллере, например), изменить загрузочный файл или использовать js, очевидно, является плохим решением.

так что у вас есть структура вашего сайта:

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

откройте свой инспектор кода и переместите модальный корневой каталог, он должен работать (но не там, где вы хотите):

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

теперь поместите его в первый div и проверьте, работает ли он: если да, проверьте следующий дочерний элемент до тех пор, пока он не будет работать, и найдите проблему div, которая является проблемой;

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

Как только вы узнаете, какой div является проблемой, вы можете играть с дисплеем и позицией css, чтобы заставить его работать.

у всех есть другая структура, но в моем случае установка родителя на display: table; была решением

Ответ 18

Поместите этот код туда, где вы хотите

$('.modal').on('shown.bs.modal', function () {
    var max_index = null;
    $('.modal.fade.in').not($(this)).each(function (index , value){
        if(max_index< parseInt( $(this).css("z-index")))
            max_index = parseInt( $(this).css("z-index"));
    });
    if (max_index != null) $(this).css("z-index", max_index + 1);
});

Ответ 19

Много раз вы не можете перемещать модальную внешность, так как это влияет на структуру вашего проекта.

Причина, по которой задний фон превышает ваш модальный, - это id, у родителя есть какая-либо позиция.

Очень простой способ решить проблему, а затем перемещать свой внешний внешний вид - это перемещение фоновой структуры внутри, если у вас есть модальный. В вашем случае это может быть

$(".modal-backdrop").appendTo("main");

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

Ответ 20

просто передвиньте свой модальный вне всех содержимого div, поместите его в основном до закрытия тела.

Ответ 21

У меня была похожая проблема, что исчезновение не работало, и наложение осталось на странице. У меня было динамическое содержимое, добавленное обратно на страницу (обновлять часть содержимого только при модальных действиях). У меня также был этот $ ('# rejectModal-' +itemId). Modal ('hide') (itemId - это динамический идентификатор для нескольких модалов на одной странице для отклонения некоторой информации), но проблема все еще не устранена.

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

@{ 
    Layout = null;
}

Ответ 22

Сначала убедитесь, что модаль не находится ни в одном родительском div. Затем добавьте $ ( '# MyModal'). AppendTo ( "тело" )

Это сработало для меня.

Ответ 23

В дополнение ко всем ответам здесь я узнал, что bootstrap4 "анимированный fadeIn" также вызывает эту ошибку (не зависящую от модальности за фоном):

проверьте, находится ли ваш модал в следующем родительском теге (анимация начальной загрузки)

<div class="animated fadeIn"></div>

Я удалил этот тег - решил проблему для меня.

Ответ 24

Если вы используете JQuery, вы можете использовать appendTo() для добавления модального элемента к определенному элементу, в этом случае в большинстве случаев простая одна строка может перемещать ваш мода поверх фона, независимо от того, где ваш модальная позиция div

$("#myModal").appendTo("body");

здесь ссылка на функцию JQuery appendTo: http://api.jquery.com/appendto/

Я обновил его до вашей скрипки http://jsfiddle.net/ZBQ8U/240/

Ответ 25

это работает для меня.

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $('#modalDecision');
    // 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 = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
        $(element).append($(backDrop));
    });

Ответ 26

i столкнулся с этой проблемой, и после изучения моего css основной контейнер (прямой дочерний элемент тела) имел:

position: relative
z-index: 1

фон работал хорошо после того, как я удалил эти два свойства. Вы также можете столкнуться с этой проблемой, если главный wraper имеет position: fixed

Ответ 27

Просто удалите фон, вставьте этот код в файл CSS

.modal-backdrop {
      /* bug fix - no overlay */    
      display: none;    
}