Наложение нескольких модалов


185

Мне нужно, чтобы наложение показывалось над первым модалом, а не сзади.

Модальное наложение позади

Я попытался изменить z-indexиз .modal-backdrop, но это становится беспорядок.

В некоторых случаях у меня есть более двух модалов на одной странице.

Ответы:


430

Увидев множество исправлений для этого, и ни одно из них не было именно тем, что мне было нужно, я пришел к еще более короткому решению, вдохновленному @YermoLamers & @Ketwaroo.

Фоновое исправление z-index
Это решение использует, setTimeoutпотому что .modal-backdropне создается при запуске события show.bs.modal.

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});
  • Это работает для каждого .modalсозданного на странице (даже динамические модалы)
  • Фон мгновенно перекрывает предыдущий модальный

Пример jsfiddle

Если по какой-либо причине вам не нравится жестко запрограммированный z-индекс, вы можете рассчитать самый высокий z-индекс на странице следующим образом:

var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
  return +el.style.zIndex;
})) + 10;

Исправление
полосы прокрутки Если на вашей странице есть модальное окно, которое превышает высоту браузера, вы не можете прокрутить его при закрытии второго модального окна. Чтобы исправить это, добавьте:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

Версии
Это решение протестировано с начальной загрузкой 3.1.0 - 3.3.5.


1
@ A1rPun не работает для меня .. когда я закрываю второй модал .. тело становится прокручиваемым .. я использовал весь твой код .. :(
Vishal

Не работал в моей среде с последними BS. Я должен был сделать: $ ('. Modal-фон'). Last (). Not ('. Modal-stack'). Css ('z-index', zIndex - 1) .addClass ('modal-stack') ;
metamagikum

2
Мне пришлось внести небольшое изменение (добавлено .not(this)во вторую строку), чтобы заставить его работать с начальной var zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
загрузкой datepicker

Если существуют два модальности, то первый удаляется, а третий добавляется, у третьего будет тот же z-индекс, что и у второго, так как они оба использовали длину 2. Мне нужно было указать последний использованный z-индекс через модальности.
Murphybro2

3
Прекрасно работает с последним BS4
wobsoriano

85

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

Вы можете довольно легко добиться того же эффекта, подключив обработчики событий show.bs.modal и hidden.bs.modal и настроив там z-index.

Вот рабочий пример

Немного больше информации доступно здесь.

Это решение работает автоматически с произвольно глубокими стеками модов.

Исходный код скрипта:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

3
Круто, однако, когда один модальный режим закрыт, появляются две полосы прокрутки - одна для модальных, вторая для всей страницы. Можно ли это решить?
Сомниум

Вы используете последнюю версию начальной загрузки?
Ермо Ламерс

3
Чтобы справиться с дополнительной полосой прокрутки при закрытии, вам нужно добавить класс «modal-open» к телу в обработчике hidden.bs.modal.
Ли

5
Одна проблема, с которой я столкнулся, заключалась в том, что, когда показывался первый модал, и нуждалась в полосе прокрутки. Если бы я показывал второй модал, она убрала полосу прокрутки первого модала, и я застрял с обрезанным модалом. Чтобы решить эту проблему, я просто добавил это в свой CSS, .modal {overflow-y: auto; }
ScubaSteve

2
Я чувствую, что это должен быть принятый ответ. У меня работает без нареканий.
Мэтью Гохин

24

Что-то более короткая версия, основанная на предложении Ермо Ламерса, похоже, это работает хорошо. Даже с такими базовыми анимациями, как постепенное исчезновение и даже сумасшедший поворот газеты Бэтмена. http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

7
Одна проблема, которая здесь остается, заключается в том, что если вы закроете второй модальный режим и на вашей странице будет достаточно текста, чтобы превысить размер браузера, вы получите странное поведение полосы прокрутки. Вы должны также восстановить modal-openкласс на элемент тела: jsfiddle.net/vkyjocyn
StriplingWarrior

22

Комбинируя ответ A1rPun с предложением StriplingWarrior, я придумал следующее:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

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

Скрипка здесь


2
Могу ли я предложить использовать индекс max z открытых модалов для определения базового z-индекса вместо жестко заданного значения 1040? stackoverflow.com/a/5680815/2569159
Harco Gijsbers

12

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

Демонстрация по загрузке: http://www.bootply.com/cObcYInvpq

Github: https://github.com/jhaygt/bootstrap-multimodal

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

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

Z-индекс видимого фона обновляется как для событий, так show.bs.modalи для hidden.bs.modalсобытий:

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

Хорошее решение. Я ожидаю, что фон станет темнее, когда у вас будет несколько модальностей, но я понимаю, почему вы этого не хотите. @AndyBurton Не могли бы вы дать мне знать, чего не хватает в моем решении?
A1rPun

@ A1rPun при открытии и закрытии 2-го модала полосы прокрутки, которые позволяли прокручивать в 1-м модале, были удалены. IIRC это выглядело потому, что класс на теле был удален, когда 2-й модал был закрыт.
Энди Бертон

@AndyBurton Я тоже занимаюсь решением этой проблемы.
1

11

При решении Stacking modals прокручивает главную страницу, когда она закрыта, я обнаружил, что более новые версии Bootstrap (по крайней мере, начиная с версии 3.0.3) не требуют никакого дополнительного кода для укладки модалов.

Вы можете добавить более одной модальной линии (конечно, с другим идентификатором) на свою страницу. Единственная проблема, обнаруженная при открытии более одного модального режима, заключается в том, что закрытие удаляетmodal-open класс для селектора тела.

Вы можете использовать следующий код Javascript для повторного добавления modal-open:

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

Если вам не нужен эффект фона для сложенного модала, вы можете установить data-backdrop="false" .

Версия 3.1.1. Исправлена ​​ошибка, из-за которой фиксировался модальный фон, перекрывающий полосу прокрутки модала , но вышеприведенное решение, похоже, также работает с более ранними версиями.


8

Наконец-то решено. Я проверял это во многих отношениях и прекрасно работает.

Вот решение для тех, у кого есть такая же проблема: Измените функцию Modal.prototype.show (в bootstrap.js или modal.js)

ИЗ:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

TO:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

Это самый лучший способ, который я нашел: проверить, сколько модалей открыто, и изменить z-индекс модала и фона на более высокое значение.


6

Если вы ищете решение Bootstrap 4, есть простое решение с использованием чистого CSS:

.modal.fade {
    background: rgba(0,0,0,0.5);
}

Кажется, это работает хорошо ... вы думаете, это будет стандартный Bootstrap?
Бен в Калифорнии

3

Попробуйте добавить следующее в ваш JS при загрузке

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

Объяснение:

Поиграв с атрибутами (используя инструмент разработки Chrome), я понял, что любое z-indexзначение ниже1031 , отодвинет на задний план.

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

демонстрация


2

Каждый раз, когда вы запускаете sys.showModal, функция увеличивает z-index и устанавливает новый модальный режим.

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');

2

Решение этой проблемы для меня состояло в том, чтобы НЕ использовать класс "fade" в моих модальных div-ах.


2

Нет сценариев решения, используя только CSS, если у вас есть два слоя модалов, установите 2-й модал на более высокий индекс z

.second-modal { z-index: 1070 }

div.modal-backdrop + div.modal-backdrop {
   z-index: 1060; 
}

2

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

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

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

2

Мое решение для bootstrap 4, работающее с неограниченной глубиной модальных и динамических модальных.

$('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});

Отлично сработало для меня
Капитан Белка

1

Каждому модалу должен быть присвоен свой идентификатор, а каждая ссылка должна быть ориентирована на другой модальный идентификатор. Так должно быть что-то вроде этого:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

1

РЕДАКТИРОВАТЬ: Bootstrap 3.3.4 решил эту проблему (и другие модальные проблемы), так что если вы можете обновить свои загрузочные CSS и JS, это было бы лучшим решением. Если вы не можете обновить приведенное ниже решение, оно все равно будет работать и, по сути, будет работать так же, как и при начальной загрузке 3.3.4 (пересчитать и применить отступы).

Как отметил Басс Йобсен, в новых версиях Bootstrap решен z-индекс. Для меня все еще были проблемы с открытым модальным классом и правым отступом, но этот сценарий, вдохновленный решением Yermo Lamers, решает эту проблему. Просто поместите его в свой файл JS и наслаждайтесь.

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});

1

Проверь это! Это решение решило проблему для меня, несколько простых строк CSS:

.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

Вот ссылка на то, где я ее нашел: Bootply Просто убедитесь, что .modual, который должен отображаться сверху, является вторым в HTML-коде, поэтому CSS может найти его как «четный».


1

работа для открытия / закрытия мультимодальных

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

    jQuery(document).on('hidden.bs.modal', '.modal', function () 
    {
        if (jQuery('.modal:visible').length)
        {
            jQuery(document.body).addClass('modal-open');

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

демонстрация

https://www.bootply.com/cObcYInvpq#


1

Для меня эти простые правила scss работали отлично:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

Если эти правила приводят к тому, что в вашем случае неправильная модальность будет выше, либо измените порядок ваших модальных дивов, либо измените (нечетное) на (четное) в приведенном выше scss.


0

Вот некоторые CSS с использованием nth-of-typeселекторов, которые, кажется, работают:

.modal:nth-of-type(even) {
    z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

Bootply: http://bootply.com/86973


1
Хорошо, это здорово, но я поставил третий модал, и он не работает. У меня есть несколько скриптов, которые генерируют его (например, оповещения, окна поиска и т. Д.), И я могу иметь 3 открытых модала одновременно (пока я не знаю). Я не очень хорошо с CSS, извините, если я что-то потерял. Есть код: bootply.com/86975
Виллиан Боно Дайпрай

0

У меня был похожий сценарий, и после небольшого исследования я нашел решение. Хотя я не очень хорош в JS, мне все же удалось записать небольшой запрос.

http://jsfiddle.net/Sherbrow/ThLYb/

<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>





$('.ingredient-item').on('click', function(e){

   e.preventDefault();

    var content = $(this).find('p').text();

    $('.modal-body').html(content);

});

0

Добавить глобальную переменную в modal.js

var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data 

// показать функцию внутри переменной add - Modal.prototype.backdrop

var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"

that.$element
    .show()
    .scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal 

if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+

this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass

0

Другие решения не работали для меня из коробки. Я думаю, возможно, потому что я использую более свежую версию Bootstrap (3.3.2) .... наложение появлялось поверх модального диалога.

Я немного переработал код и прокомментировал часть, которая корректировала модальный фон. Это решило проблему.

    var $body = $('body');
    var OPEN_MODALS_COUNT = 'fv_open_modals';
    var Z_ADJUSTED = 'fv-modal-stack';
    var defaultBootstrapModalZindex = 1040;

    // keep track of the number of open modals                   
    if ($body.data(OPEN_MODALS_COUNT) === undefined) {
        $body.data(OPEN_MODALS_COUNT, 0);
    }

    $body.on('show.bs.modal', '.modal', function (event)
    {
        if (!$(this).hasClass(Z_ADJUSTED))  // only if z-index not already set
        {
            // Increment count & mark as being adjusted
            $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
            $(this).addClass(Z_ADJUSTED);

            // Set Z-Index
            $(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));

            //// BackDrop z-index   (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
            //$('.modal-backdrop').not( '.' + Z_ADJUSTED )
            //        .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
            //        .addClass(Z_ADJUSTED);
        }
    });
    $body.on('hidden.bs.modal', '.modal', function (event)
    {
        // Decrement count & remove adjusted class
        $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
        $(this).removeClass(Z_ADJUSTED);
        // Fix issue with scrollbar being shown when any modal is hidden
        if($body.data(OPEN_MODALS_COUNT) > 0)
            $body.addClass('modal-open');
    });

В качестве примечания: если вы хотите использовать это в AngularJs, просто поместите код внутри метода вашего модуля .run ().


0

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

Похоже, что некоторые расширения / плагины полагаются на содержимое DOM верхнего уровня, что делает расчет .Max настолько неприлично большим числом, что он не может увеличивать zIndex дальше. Это приводит к модальному режиму, в котором наложение отображается поверх модального некорректно (если вы используете инструменты Firebug / Google Inspector, вы увидите zIndex порядка 2 ^ n - 1)

Мне не удалось выделить причину, по которой различные формы Math.Max ​​для z-Index приводят к этому сценарию, но это может произойти, и оно будет уникальным для нескольких пользователей. (В моих общих тестах на browsertack этот код работал отлично).

Надеюсь, это кому-нибудь поможет.


0

В моем случае проблема была вызвана расширением браузера, которое включает в себя файлы bootstrap.js, в которых событие show обрабатывается дважды и modal-backdropдобавляются два div, но при закрытии модального режима удаляется только один из них.

Обнаружил, что добавив точку останова модификации поддерева к элементу body в chrome, и отследил добавление modal-backdropdiv.


0
$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});

Ответы только на код часто не помогают указать причину проблемы. Вы должны включить объяснение, почему это решает проблему. Пожалуйста, прочитайте Как мне написать хороший ответ?
FluffyKitten

0

Обновление: 22.01.2019, 13.41 Я оптимизировал решение с помощью jhay, который также поддерживает закрытие и открытие одинаковых или разных диалоговых окон, например, при переходе от одной детализации данных к другой вперед или назад.

(function ($, window) {
'use strict';

var MultiModal = function (element) {
    this.$element = $(element);
    this.modalIndex = 0;
};

MultiModal.BASE_ZINDEX = 1040;

/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;

MultiModal.prototype.show = function (target) {
    var that = this;
    var $target = $(target);

    // Bootstrap triggers the show event at the beginning of the show function and before
    // the modal backdrop element has been created. The timeout here allows the modal
    // show function to complete, after which the modal backdrop will have been created
    // and appended to the DOM.

    // we only want one backdrop; hide any extras
    setTimeout(function () {
        /* Count the number of triggered modal dialogs */
        that.modalIndex++;

        if (that.modalIndex >= MultiModal.MAX_INDEX) {
            /* Collate the zIndexes of every open modal dialog according to its order */
            that.collateZIndex();
        }

        /* Modify the zIndex */
        $target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);

        /* we only want one backdrop; hide any extras */
        if (that.modalIndex > 1) 
            $('.modal-backdrop').not(':first').addClass('hidden');

        that.adjustBackdrop();
    });

};

MultiModal.prototype.hidden = function (target) {
    this.modalIndex--;
    this.adjustBackdrop();

    if ($('.modal.in').length === 1) {

        /* Reset the index to 1 when only one modal dialog is open */
        this.modalIndex = 1;
        $('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
        var $modalBackdrop = $('.modal-backdrop:first');
        $modalBackdrop.removeClass('hidden');
        $modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);

    }
};

MultiModal.prototype.adjustBackdrop = function () {        
    $('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};

MultiModal.prototype.collateZIndex = function () {

    var index = 1;
    var $modals = $('.modal.in').toArray();


    $modals.sort(function(x, y) 
    {
        return (Number(x.style.zIndex) - Number(y.style.zIndex));
    });     

    for (i = 0; i < $modals.length; i++)
    {
        $($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
        index++;
    };

    this.modalIndex = index;
    this.adjustBackdrop();

};

function Plugin(method, target) {
    return this.each(function () {
        var $this = $(this);
        var data = $this.data('multi-modal-plugin');

        if (!data)
            $this.data('multi-modal-plugin', (data = new MultiModal(this)));

        if (method)
            data[method](target);
    });
}

$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;

$(document).on('show.bs.modal', function (e) {
    $(document).multiModal('show', e.target);
});

$(document).on('hidden.bs.modal', function (e) {
    $(document).multiModal('hidden', e.target);
});}(jQuery, window));

0

Проверьте количество модалов и добавьте значение к фону как z-index

    var zIndex = 1500 + ($('.modal').length*2) + 1;
    this.popsr.css({'z-index': zIndex});

    this.popsr.on('shown.bs.modal', function () {
        $(this).next('.modal-backdrop').css('z-index', zIndex - 1);
    });

    this.popsr.modal('show');
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.