Bootstrap модальный сидя за фоном

хотя z-индекс .modal выше, чем у .modal-backdrop, что .modal находится в Родительском div #content-wrap, который имеет более низкий Z-индекс, чем .modal-backdrop (z-индекс: 1002 против z-индекса: 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 сидит позади, но это не обязательно, потому что элемент nav приходит перед content-wrap в HTML, поэтому вам нужно только расположить их, а не явно установить порядок укладки.

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

ДЕМО ЗДЕСЬ

в моем случае я мог бы исправить это, добавив 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);
});

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

Так этот код выполнил работу просто превосходно:

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

$('#product_' + product_id + ' .modal ').insertAfter($('body'));

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

.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;. Анимация все еще работала нормально.

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

изменения будут в 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.

Попробуйте удалить фон, если он вам не нужен (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>

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

если мы не можем удалить фон и / или у нас есть компонентная структура, такая угловая или vue, мы не можем переместить модальный в корень. я сделал этот трюк: поставил свой пользовательский контейнер модального фона(с aditional class) в качестве брата для контейнера модального диалога и добавил 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}

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

<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.

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

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

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

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

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

из файла bootstrap.css класс .modal-backdrop

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

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

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

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

.modal.fade {
    display: none;
}

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

Я обнаружил, что применение ионной структуры (ionic.минута.cs) после bootstrap, проходящего этот вопрос для меня.

если вы не можете поместить модальный в корень (если вы используете угловой и модальный в контроллере, например),модификации bootstrap или использование 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; решение

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

$('.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);
});

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

почему фоном идет выше ваш модал-это ID родителя имеет любое заданное положение.

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

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

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

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

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

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

@{ 
    Layout = null;
}

сначала убедитесь, что модальный не находится в Родительском div. Затем добавить $('#myModal').добавление("тело")

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

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

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

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

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

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

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

вот ссылка на функцию jQuery appendTo: http://api.jquery.com/appendto/

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

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

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

Я encountred эту проблему, и после изучения мои CSS, основного контейнера (прямым потомком тела) было:

position: relative
z-index: 1

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