Çoklu modüler kaplama

Yer paylaşımının arkada değil, ilk modalın üzerinde gösterilmesine ihtiyacım var.

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Second Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

Ben değiştirmeye çalıştı z-indexarasında .modal-backdrop, ama bir karışıklık olur.

Bazı durumlarda aynı sayfada ikiden fazla modelim var.

Bunun için birçok düzeltme gördükten ve hiçbiri tam olarak ihtiyacım olan şey değildi. @YermoLamers & @ Ketwaroo'dan esinlenen daha kısa bir çözüm buldum.

Arka plan Z-endeksi düzeltmek
Bu çözüm bir kullanır setTimeoutçünkü .modal-backdropolay sırasında oluşturulmaz show.bs.modaltetiklenir.

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

• Bu .modal, sayfada oluşturulan her şey için geçerlidir (dinamik modüller bile)
• Zemin anında önceki modun üzerini kaplar

Örnek jsfiddle

Herhangi bir nedenle sabit kodlu z-dizinini beğenmediyseniz, sayfadaki en yüksek z-dizinini şu şekilde hesaplayabilirsiniz :

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

Kaydırma çubuğu düzeltmesi
Sayfanızda tarayıcı yüksekliğini aşan bir yöntem varsa, ikinci bir yöntemi kapatırken içeri giremezsiniz. Bu eklentiyi düzeltmek için:

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

Sürümler
Bu çözüm bootstrap 3.1.0 - 3.3.5 ile test edilmiştir

Bir cevabın kabul edildiğinin farkındayım, ancak bunu düzeltmek için bootstrap'i hacklememeyi şiddetle tavsiye ediyorum.

Gösterilen etkiyi.bs.modal ve hidden.bs.modal olay işleyicilerini bağlayıp orada z-dizinini ayarlayarak kolayca aynı etkiyi elde edebilirsiniz.

İşte çalışan bir örnek

Biraz daha fazla bilgiye buradan ulaşabilirsiniz.

Bu çözüm, modları keyfi olarak derin istifler ile otomatik olarak çalışır.

Komut dosyası kaynak kodu:

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

    });        
});

Yermo Lamers'ın önerisine dayanan daha kısa bir şey, bu iyi çalışıyor gibi görünüyor. Solmaya giriş / çıkış gibi temel animasyonlar ve hatta çılgın batman gazetesi bile dönüyor. 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');
});

A1rPun'un cevabını StriplingWarrior'ın önerisiyle birleştirdiğimde bununla geldim:

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

Hatta sonradan eklenen dinamik kipler için bile çalışır ve ikinci kaydırma çubuğu sorununu kaldırır. Bunu yararlı bulduğum en önemli şey, formları Bootbox uyarılarından doğrulama geri bildirimi ile entegre etmekti, çünkü bunlar dinamik modals kullanıyorlar ve bu nedenle olayı .modal yerine belgeye bağlamanızı gerektiriyorlar, çünkü bu sadece mevcut olanlara ekleniyor modals.

Burada keman çal.

Burada yayınlanan birçok fikri içeren bir Bootstrap eklentisi oluşturdum.

Bootply ile ilgili demo: http://www.bootply.com/cObcYInvpq

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

Ayrıca arka planın daha koyu ve daha koyu hale gelmesine neden olan ardışık modlarla ilgili sorunu giderir. Bu, herhangi bir zamanda yalnızca bir arka planın görünür olmasını sağlar:

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

Görünür arka planın z dizini hem show.bs.modalve hidden.bs.modalolaylarda güncellenir :

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

İstifleme modlarını çözerken , biri kapatıldığında ana sayfayı kaydırır, Bootstrap'ın daha yeni sürümlerinin (en azından sürüm 3.0.3'ten beri) modal'ları yığınlamak için ek kod gerektirmediğini fark ettim.

Sayfanıza birden fazla mod (elbette farklı bir kimliğe sahip) ekleyebilirsiniz. Birden fazla mod açarken karşılaşılan tek sorun modal-open, vücut seçicisinin sınıfın kaldırılmasıdır .

Aşağıdaki Javascript kodunu yeniden eklemek için kullanabilirsiniz modal-open:

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

Yığılmış mod için zemin efektine ihtiyaç duymamanız durumunda ayarlayabilirsiniz data-backdrop="false".

Sürüm 3.1.1. modun kaydırma çubuğunu kaplayan sabit zemini düzelt , ancak yukarıdaki çözüm daha önceki sürümlerle de çalışıyor gibi görünüyor.

Sonunda çözüldü. Birçok yönden test ettim ve iyi çalışıyor.

Aynı sorunu yaşayan herkes için çözüm: Modal.prototype.show işlevini değiştirin (bootstrap.js veya modal.js adresinde)

DAN:

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

Bulduğum en iyi yol: kaç modelin açıldığını kontrol edin ve modalın ve zeminin z-endeksini daha yüksek bir değere değiştirin.

Bootstrap 4 çözümü arıyorsanız, saf CSS kullanan kolay bir çözüm var:

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

Bootply'da JS'nize aşağıdakileri eklemeyi deneyin

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

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

Açıklama:

Özelliklerle (Chrome'un geliştirici aracını kullanarak) oynadıktan sonra, z-indexaşağıdaki herhangi bir değerin 1031arka planın arkasına koyacağını fark ettim .

Öyleyse bootstrap'ın modal olay tutamaçlarını z-indexkullanarak 1030. Eğer #myModal2gösterilen ve ayarlanırsa z-indexiçin geri 1040eğer #myModal2gizlidir.

gösteri

Sys.showModal fonksiyonunu her çalıştırdığınızda z-endeksini arttırır ve yeni modalınıza ayarlar.

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

Benim için çözüm "kalıcı" sınıf benim modal div kullanmak DEĞİL oldu.

Komut dosyası çözümü yok, sadece css kullanarak iki modl katmanınız varsa, 2. modalı daha yüksek bir z dizinine ayarlayın

.second-modal { z-index: 1070 }

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

Belirli bir modalın başka bir açık modalın üstünde görünmesini istiyorsanız , diğer modaldan sonra en üst modalın HTML'sini eklemeyi deneyin div.

Bu benim için çalıştı:

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

Bootstrap 4 için çözümüm, sınırsız model derinliği ve dinamik mod ile çalışıyor.

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

Her mod için farklı bir kimlik verilmeli ve her bağlantıya farklı bir mod kimliği hedeflenmelidir. Yani böyle bir şey olmalı:

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

DÜZENLEME: Bootstrap 3.3.4 bu sorunu (ve diğer kalıcı sorunları) çözdü, böylece bootstrap CSS ve JS'nizi güncelleyebiliyorsanız, bu en iyi çözüm olacaktır. Aşağıdaki çözümü güncelleyemiyorsanız yine de çalışır ve aslında bootstrap 3.3.4 ile aynı şeyi yapar (yeniden hesaplayın ve dolgu uygulayın).

Bass Jobsen'in belirttiği gibi, Bootstrap'ın daha yeni sürümleri z-endeksini çözdü. Kalıcı-açık sınıf ve dolgu hakkı benim için hala problemdi, ancak Yermo Lamers çözümünden esinlenen bu senaryolar onu çözüyor. Sadece JS dosyanıza bırakın ve keyfini çıkarın.

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

Şuna bir bak! Bu çözüm benim için sorunu çözdü, birkaç basit CSS satırı:

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

İşte onu buldum bir bağlantı: Bootply Sadece Üstte görünmesi gereken .modual HTML kodu ikinci olduğundan emin olun, böylece CSS "çift" olarak bulabilirsiniz.

açık / kapalı çoklu modüller için çalışmak

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

gösteri

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

Benim için, bu basit scss kuralları mükemmel çalıştı:

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

Bu kurallar sizin durumunuzda yanlış modun en üstte olmasına neden oluyorsa, modsal div'lerinizin sırasını değiştirin veya yukarıdaki scss'de (tek) değerini (çift) olarak değiştirin.

İşte nth-of-typeişe yaramış gibi görünen bazı CSS seçicileri:

.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

Benzer bir senaryom vardı ve biraz Ar-Ge'den sonra bir çözüm buldum. JS büyük olmamasına rağmen hala küçük bir sorgu yazmak başardık.

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

});

Modal.js dosyasına genel değişken ekleyin

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

// add değişkeni içindeki işlevi göster - 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

Diğer çözümler benim için kutudan çıkmadı. Belki de Bootstrap (3.3.2) daha yeni bir sürümünü kullandığım için .... bindirme modal iletişim üstünde görünüyordu .

Kodu biraz yeniden düzenledim ve modal fonu ayarlayan kısmı yorumladım. Bu sorunu düzeltti.

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

Yan not olarak, bunu AngularJ'lerde kullanmak istiyorsanız, kodu modülünüzün .run () yönteminin içine koymanız yeterlidir.

Ne yazık ki yorum yapmak için bir üne sahip değilim, ancak 1040'lık bir z-endeksinin sabit kodlanmış taban çizgisine sahip kabul edilen çözümün, sayfada görüntülenen maksimum zIndex'i bulmaya çalışan zIndex hesaplamasından daha üstün olduğu belirtilmelidir.

Belirli uzantıların / eklentilerin .Max hesaplamasını bu kadar büyük bir sayı haline getiren üst düzey DOM içeriğine bağlı olduğu ve zIndex'i daha fazla arttıramayacağı anlaşılıyor. Bu, şablonun modun üzerinde yanlış göründüğü bir modla sonuçlanır (Firebug / Google Inspector araçlarını kullanırsanız, 2 ^ n - 1 sırasıyla bir zIndex görürsünüz)

Z-Index için Math.Max'ın çeşitli formlarının bu senaryoya yol açmasının belirli bir nedenini izole edemedim, ancak olabilir ve birkaç kullanıcı için benzersiz görünecektir. (Browserstack üzerindeki genel testlerim bu kodun mükemmel çalışmasını sağladı).

Umarım bu birine yardımcı olur.

Benim durumumda sorun, show olayının iki ve iki kez işlendiği bootstrap.js dosyalarını içeren bir tarayıcı uzantısından kaynaklandı modal-backdrop divin eklendiği , ancak modal kapatıldığında bunlardan sadece biri kaldırıldı.

Bunun, kromdaki gövde öğesine bir alt ağaç modifikasyon kesme noktası ekleyerek ve modal-backdropdiv ekleyerek izlendiğini buldu .

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

});

Güncelleme: 22.01.2019, 13.41 Çözümü jhay ile optimize ettim, bu da örneğin bir detay verisinden diğerine ileri veya geri adım attığında aynı veya farklı diyalogları kapatmayı ve açmayı destekliyor.

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

Moda sayısını kontrol edin ve z-endeksi olarak zemine değeri ekleyin

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