Overlay beberapa modal

Saya perlu bahwa tampilan menunjukkan di atas modal pertama, bukan di belakang.

$('#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>

Aku mencoba untuk mengubah z-indexdari .modal-backdrop, tetapi menjadi berantakan.

Dalam beberapa kasus saya memiliki lebih dari dua modals di halaman yang sama.

Setelah melihat banyak perbaikan untuk ini, dan tidak ada satupun yang persis seperti yang saya butuhkan, saya menemukan solusi yang lebih pendek yang terinspirasi oleh @YermoLamers & @Ketwaroo.

Backdrop z-index fix
Solusi ini menggunakan setTimeoutkarena .modal-backdroptidak dibuat ketika acara show.bs.modaldipicu.

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

• Ini berfungsi untuk setiap yang .modaldibuat pada halaman (bahkan dinamis dinamis)
• Latar belakang langsung tumpang tindih dengan modal sebelumnya

Contoh jsfiddle

Jika Anda tidak menyukai indeks-z hardcoded karena alasan apa pun, Anda dapat menghitung indeks-z tertinggi pada halaman seperti ini:

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

Perbaikan scrollbar
Jika Anda memiliki modal pada halaman Anda yang melebihi tinggi browser, maka Anda tidak dapat menggulirnya saat menutup modal kedua. Untuk memperbaiki ini tambahkan:

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

Versi
Solusi ini diuji dengan bootstrap 3.1.0 - 3.3.5

Saya menyadari jawaban telah diterima, tetapi saya sangat menyarankan untuk tidak meretas bootstrap untuk memperbaikinya.

Anda dapat dengan mudah mencapai efek yang sama dengan mengaitkan event handler yang ditampilkan.bs.modal dan hidden.bs.modal dan menyesuaikan indeks-z di sana.

Ini contoh yang bagus

Sedikit lebih banyak info tersedia di sini.

Solusi ini bekerja secara otomatis dengan banyak tumpukan modals.

Kode sumber skrip:

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

    });        
});

Versi yang lebih pendek berdasarkan saran Yermo Lamers, sepertinya ini berfungsi dengan baik. Bahkan dengan animasi dasar seperti fade in / out dan bahkan memutar koran batman gila. 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');
});

Menggabungkan jawaban A1rPun dengan saran dari StriplingWarrior, saya datang dengan ini:

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

Bekerja bahkan untuk modem dinamis yang ditambahkan setelah fakta, dan menghapus masalah scrollbar kedua. Hal yang paling penting yang saya temukan berguna untuk ini adalah mengintegrasikan formulir di dalam modals dengan umpan balik validasi dari peringatan Bootbox, karena yang menggunakan modem dinamis dan dengan demikian mengharuskan Anda untuk mengikat acara ke dokumen daripada ke .modal, karena itu hanya melekat pada yang sudah ada modals.

Biola di sini.

Saya membuat plugin Bootstrap yang menggabungkan banyak ide yang diposting di sini.

Demo di Bootply: http://www.bootply.com/cObcYInvpq

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

Ini juga membahas masalah dengan modalnya berturut-turut yang menyebabkan latar belakang menjadi lebih gelap dan lebih gelap. Ini memastikan bahwa hanya satu latar belakang yang terlihat pada waktu tertentu:

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

Indeks-z dari latar belakang yang terlihat diperbarui pada acara show.bs.modaldan hidden.bs.modal:

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

Ketika menyelesaikan Stacking modals, gulir halaman utama ketika salah satu ditutup saya menemukan bahwa versi Bootstrap yang lebih baru (setidaknya sejak versi 3.0.3) tidak memerlukan kode tambahan untuk menumpuk modals.

Anda dapat menambahkan lebih dari satu modal (tentu saja memiliki ID berbeda) ke halaman Anda. Satu-satunya masalah yang ditemukan ketika membuka lebih dari satu modal adalah bahwa penutupan satu menghapus modal-openkelas untuk pemilih tubuh.

Anda dapat menggunakan kode Javascript berikut untuk menambahkan kembali modal-open:

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

Dalam hal ini tidak memerlukan efek latar belakang untuk modal ditumpuk yang dapat Anda atur data-backdrop="false".

Versi 3.1.1. memperbaiki Memperbaiki latar belakang modal overlay scrollbar modal , tetapi solusi di atas tampaknya juga bekerja dengan versi sebelumnya.

Akhirnya terpecahkan. Saya mengujinya dalam banyak cara dan berfungsi dengan baik.

Berikut adalah solusi untuk siapa pun yang memiliki masalah yang sama: Ubah fungsi Modal.prototype.show (di bootstrap.js atau modal.js)

DARI:

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

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

that.enforceFocus()

UNTUK:

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

Ini cara terbaik yang saya temukan: periksa berapa banyak modal dibuka dan ubah indeks-z modal dan latar belakang ke nilai yang lebih tinggi.

Jika Anda mencari solusi Bootstrap 4, ada yang mudah menggunakan CSS murni:

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

Coba tambahkan berikut ini ke JS Anda saat bootply

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

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

Penjelasan:

Setelah bermain-main dengan atribut (menggunakan alat dev Chrome), saya menyadari bahwa z-indexnilai apa pun di bawah ini 1031akan meletakkan hal-hal di belakang layar.

Jadi dengan menggunakan bootstrap's modal event handle saya atur z-indexke 1030. Jika #myModal2ditampilkan dan atur z-indexkembali ke 1040jika #myModal2disembunyikan.

Demo

Setiap kali Anda menjalankan fungsi sys.showModal menambah z-index dan mengaturnya ke modal baru Anda.

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

Solusi untuk ini bagi saya adalah TIDAK menggunakan kelas "fade" pada modal divs saya.

Tidak ada solusi skrip, hanya menggunakan css karena Anda memiliki dua lapisan modals, atur modal ke-2 ke indeks z yang lebih tinggi

.second-modal { z-index: 1070 }

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

Jika Anda ingin modal tertentu muncul di atas modal terbuka lain, coba tambahkan HTML modal teratas setelah modal lainnya div.

Ini bekerja untuk saya:

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

Solusi saya untuk bootstrap 4, bekerja dengan kedalaman modals dan modal dinamis yang tidak terbatas.

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

Setiap modal harus diberi id yang berbeda dan setiap tautan harus ditargetkan ke id modal yang berbeda. Jadi harus seperti itu:

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

EDIT: Bootstrap 3.3.4 telah menyelesaikan masalah ini (dan masalah modal lainnya) jadi jika Anda dapat memperbarui CSS dan JS bootstrap Anda, itu akan menjadi solusi terbaik. Jika Anda tidak dapat memperbarui solusi di bawah ini masih akan berfungsi dan pada dasarnya melakukan hal yang sama dengan bootstrap 3.3.4 (menghitung ulang dan menerapkan bantalan).

Seperti yang ditunjukkan oleh Bass Jobsen, versi Bootstrap yang lebih baru telah menyelesaikan indeks-z. Kelas modal-terbuka dan padding-right masih menjadi masalah bagi saya tetapi skrip ini terinspirasi oleh solusi Yermo Lamers yang memecahkannya. Cukup taruh di file JS Anda dan nikmati.

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

Lihat ini! Solusi ini memecahkan masalah bagi saya, beberapa baris CSS sederhana:

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

Berikut adalah tautan ke tempat saya menemukannya: Bootply Pastikan bahwa .modual yang perlu muncul di Top adalah yang kedua dalam kode HTML, sehingga CSS dapat menemukannya sebagai "datar".

bekerja untuk buka / tutup multi modals

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

Demo

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

Bagi saya, aturan scss sederhana ini berfungsi dengan sempurna:

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

Jika aturan ini menyebabkan modal yang salah berada di atas dalam kasus Anda, ubah urutan modal divs Anda, atau ubah (tidak datar) menjadi (datar) di scss di atas.

Berikut adalah beberapa CSS yang menggunakan nth-of-typepenyeleksi yang tampaknya berfungsi:

.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

Saya memiliki skenario yang sama, dan setelah sedikit R&D saya menemukan solusi. Meskipun saya tidak hebat di JS, saya masih bisa menulis pertanyaan kecil.

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

});

Tambahkan variabel global dalam modal.js

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

// tampilkan fungsi di dalam add variabel - 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

Solusi lain tidak berhasil bagi saya di luar kotak. Saya pikir mungkin karena saya menggunakan versi Bootstrap yang lebih baru (3.3.2) .... overlay muncul di atas dialog modal.

Saya refactored kode sedikit dan berkomentar bagian yang menyesuaikan latar belakang modal. Ini memperbaiki masalah.

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

Sebagai catatan, jika Anda ingin menggunakannya di AngularJs, cukup masukkan kode di dalam metode .run () modul Anda.

Sayangnya saya tidak memiliki reputasi untuk berkomentar, tetapi harus dicatat bahwa solusi yang diterima dengan garis dasar hardcod dari indeks 1040 z tampaknya lebih unggul daripada perhitungan zIndex yang mencoba menemukan zIndex maksimum yang diberikan pada halaman.

Tampaknya ekstensi / plugin tertentu mengandalkan konten DOM tingkat atas yang membuat perhitungan .Max sedemikian besar, sehingga tidak dapat menambah zIndex lebih jauh. Ini menghasilkan modal di mana overlay muncul di atas modal secara tidak benar (jika Anda menggunakan alat Firebug / Google Inspector Anda akan melihat zIndex pada urutan 2 ^ n - 1)

Saya belum bisa mengisolasi apa alasan spesifik berbagai bentuk Math.Max ​​untuk z-Index mengarah ke skenario ini, tetapi itu bisa terjadi, dan itu akan tampak unik untuk beberapa pengguna. (Tes umum saya di browserstack memiliki kode ini berfungsi dengan sempurna).

Semoga ini bisa membantu seseorang.

Dalam kasus saya masalahnya disebabkan oleh ekstensi browser yang menyertakan file bootstrap.js di mana acara acara ditangani dua kali dan dua modal-backdropdiv ditambahkan, tetapi ketika menutup modal hanya satu yang dihapus.

Menemukan itu dengan menambahkan breakpoint modifikasi subtree ke elemen tubuh di chrome, dan melacak menambahkan modal-backdropdivs.

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

});

Pembaruan: 22.01.2019, 13.41 Saya mengoptimalkan solusi dengan jhay, yang juga mendukung penutupan dan pembukaan dialog yang sama atau berbeda ketika misalnya melangkah dari satu data detail ke yang lain maju atau mundur.

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

Periksa jumlah modals dan tambahkan nilai ke latar belakang sebagai 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');