ซ้อนทับ modals หลาย

ฉันต้องการให้โอเวอร์เลย์แสดงเหนือโมดัลแรกไม่ใช่ที่ด้านหลัง

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

ฉันพยายามที่จะเปลี่ยนz-indexของ.modal-backdropแต่มันกลายเป็นความยุ่งเหยิง

ในบางกรณีฉันมีโมดัลมากกว่าสองรายการในหน้าเดียวกัน

หลังจากเห็นการแก้ไขหลายอย่างสำหรับเรื่องนี้และไม่มีสิ่งใดที่ฉันต้องการฉันได้สร้างโซลูชันที่สั้นกว่าซึ่งได้รับแรงบันดาลใจจาก@YermoLamers & @Ketwaroo

แก้ไขดัชนีฉากหลัง
โซลูชันนี้ใช้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

หากคุณไม่ชอบดัชนี hardcoded 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');
});

รุ่น
โซลูชันนี้ทดสอบกับ bootstrap 3.1.0 - 3.3.5

ฉันรู้ว่าได้รับคำตอบแล้ว แต่ฉันขอแนะนำว่าอย่าแฮ็ก bootstrap เพื่อแก้ไขปัญหานี้

คุณสามารถสร้างเอฟเฟกต์เดียวกันได้ง่ายๆโดยการเชื่อมโยงตัวจัดการเหตุการณ์ที่แสดงไว้

นี่คือตัวอย่างการทำงาน

มีข้อมูลเพิ่มเติมอีกเล็กน้อยที่นี่

โซลูชันนี้ทำงานโดยอัตโนมัติด้วยโมดัลสแต็คโดยพลการ

ซอร์สโค้ดสคริปต์:

$(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 ดูเหมือนว่าจะใช้ได้ แม้จะมีภาพเคลื่อนไหวพื้นฐานเช่นจางเข้า / ออกและแม้แต่หนังสือพิมพ์แบทแมนบ้าหมุน 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 กับข้อเสนอแนะโดย 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');

ใช้งานได้แม้กับโมดัลแบบไดนามิกที่เพิ่มเข้ามาหลังจากข้อเท็จจริงและลบปัญหาแถบเลื่อนที่สอง สิ่งที่น่าสังเกตมากที่สุดที่ฉันพบว่ามีประโยชน์สำหรับการรวมรูปแบบภายใน modals กับข้อเสนอแนะการตรวจสอบจากการแจ้งเตือน Bootbox เนื่องจากผู้ที่ใช้ modals แบบไดนามิกและทำให้คุณต้องผูกเหตุการณ์กับเอกสารมากกว่า. modal เนื่องจากสิ่งนั้นเท่านั้น Modals

เล่นซอที่นี่

ฉันสร้างปลั๊กอิน Bootstrap ซึ่งรวมเอาความคิดมากมายที่โพสต์ไว้ที่นี่

การสาธิตเกี่ยวกับ Bootply: 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));

เมื่อแก้ไขโมเดลสแต็คเลื่อนหน้าหลักเมื่อปิดฉันพบว่า Bootstrap เวอร์ชันใหม่ (อย่างน้อยตั้งแต่ 3.0.3 รุ่น) ไม่ต้องใช้รหัสเพิ่มเติมใด ๆ ในการสแต็ค modals

คุณสามารถเพิ่มโมดัลได้มากกว่าหนึ่งรายการ (แน่นอนว่ามีรหัสอื่น) ในหน้าของคุณ ปัญหาเดียวที่พบเมื่อเปิดมากกว่าหนึ่งกิริยาจะเป็นการปิดที่ลบ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 คงแก้ไขกิริยาฉากหลังที่ซ้อนทับเลื่อนกิริยาของแต่ดูเหมือนว่าการแก้ปัญหาดังกล่าวข้างต้นยังทำงานร่วมกับรุ่นก่อนหน้านี้

แก้ไขได้ในที่สุด ฉันทดสอบในหลาย ๆ วิธีและใช้งานได้ดี

นี่คือวิธีแก้ปัญหาสำหรับทุกคนที่มีปัญหาเดียวกัน: เปลี่ยนฟังก์ชั่น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()

ถึง:

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

เป็นวิธีที่ดีที่สุดที่ฉันพบ: ตรวจสอบว่ามีการเปิดใช้งาน modals กี่รายการและเปลี่ยนค่าดัชนี z ของ modal และ background เป็นค่าที่สูงขึ้น

หากคุณกำลังมองหาโซลูชัน Bootstrap 4 มีวิธีง่าย ๆ โดยใช้ CSS บริสุทธิ์:

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

ลองเพิ่มสิ่งต่อไปนี้ลงใน JS ของคุณแบบ bootply

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

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

คำอธิบาย:

หลังจากใช้คุณลักษณะ (โดยใช้เครื่องมือ dev ของ Chrome) ฉันรู้ว่าz-indexค่าใด ๆด้านล่าง1031จะทำให้สิ่งต่าง ๆ อยู่เบื้องหลัง

ดังนั้นโดยใช้บูตของเหตุการณ์จับกิริยาผมตั้งไปz-index 1030หาก#myModal2ปรากฏขึ้นและตั้งค่าz-indexกลับเป็น1040หาก#myModal2ซ่อนอยู่

การสาธิต

ทุกครั้งที่คุณเรียกใช้ฟังก์ชัน sys.showModal จะเพิ่มค่าดัชนี z และตั้งค่าเป็นโมดอลใหม่ของคุณ

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

ทางออกสำหรับฉันนี้คือการไม่ใช้คลาส "จาง" ใน dival กิริยาช่วยของฉัน

ไม่มีวิธีแก้ไขสคริปต์โดยใช้ css เพียงอย่างเดียวเนื่องจากคุณมีโมดัลสองชั้นตั้งค่าโมดัลที่ 2 เป็นดัชนีซีที่สูงขึ้น

.second-modal { z-index: 1070 }

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

หากคุณต้องการคำกริยาที่เฉพาะเจาะจงที่จะปรากฏอยู่ด้านบนของอีกกิริยาเปิดให้ลองเพิ่ม 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" ... />

โซลูชันของฉันสำหรับ bootstrap 4 ทำงานกับ modal แบบไม่ จำกัด และ modal แบบไดนามิก

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

แต่ละ modal ควรได้รับ id ที่แตกต่างกันและแต่ละลิงก์ควรถูกกำหนดเป็น modal id ที่แตกต่างกัน ดังนั้นควรเป็นดังนี้:

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

แก้ไข: Bootstrap 3.3.4 ได้แก้ไขปัญหานี้ (และปัญหาอื่น ๆ กิริยา) ดังนั้นหากคุณสามารถอัปเดต bootstrap CSS และ JS ของคุณซึ่งจะเป็นทางออกที่ดีที่สุด หากคุณไม่สามารถอัปเดตโซลูชันด้านล่างนี้จะยังคงใช้งานได้และทำสิ่งเดียวกันกับ bootstrap 3.3.4 (คำนวณใหม่และใช้การเติมเต็ม)

ดังที่ Bass Jobsen ชี้ให้เห็น 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'));
});

ลองดู! วิธีการแก้ปัญหานี้แก้ปัญหาให้ฉันได้ง่ายๆเพียงไม่กี่บรรทัด CSS:

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

นี่คือลิงค์ไปยังที่ฉันพบ: Bootply เพียงตรวจสอบให้แน่ใจว่า. โมดูลที่ต้องปรากฏบนเป็นอันดับที่สองในรหัส HTML ดังนั้น CSS สามารถค้นหาได้ว่า "แม้"

ทำงานสำหรับเปิด / ปิดหลาย 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);
       }
    });
});

การสาธิต

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

สำหรับฉันกฎ scss ง่าย ๆ เหล่านี้ทำงานได้อย่างสมบูรณ์:

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

หากกฎเหล่านี้ทำให้คำกริยาที่ผิดอยู่ด้านบนในกรณีของคุณให้เปลี่ยนลำดับของคำสั่ง modal ของคุณหรือเปลี่ยน (คี่) เป็น (แม้) ใน scss ด้านบน

นี่คือ CSS บางส่วนที่ใช้nth-of-typeตัวเลือกที่ใช้งานได้:

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

บู๊ต: http://bootply.com/86973

ฉันมีสถานการณ์ที่คล้ายกันและหลังจากการวิจัยและพัฒนาเล็กน้อยฉันก็พบวิธีแก้ปัญหา แม้ว่าฉันจะไม่เก่งใน 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);

});

เพิ่มตัวแปรโกลบอลใน modal.js

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

// แสดงฟังก์ชั่นภายในเพิ่มตัวแปร - 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

โซลูชันอื่นไม่ได้ผลสำหรับฉันนอกกรอบ ฉันคิดว่าอาจเป็นเพราะฉันใช้ 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 () ของโมดูลของคุณ

น่าเสียดายที่ฉันไม่มีชื่อเสียงที่จะแสดงความคิดเห็น แต่ควรสังเกตว่าโซลูชันที่ได้รับการยอมรับที่มีพื้นฐาน hardcoded ของดัชนี 1040 z ดูเหมือนว่าจะดีกว่าการคำนวณ zIndex ที่พยายามค้นหา zIndex สูงสุดที่แสดงบนหน้า

ปรากฏว่าส่วนขยาย / ปลั๊กอินบางอย่างนั้นใช้เนื้อหา DOM ระดับบนสุดซึ่งทำให้การคำนวณ. Max เป็นจำนวนที่มากเกินไปซึ่งไม่สามารถเพิ่ม zIndex ได้อีก ซึ่งส่งผลให้เป็นโมดัลที่ภาพซ้อนทับปรากฏเหนือโมดัลอย่างไม่ถูกต้อง (ถ้าคุณใช้เครื่องมือ Firebug / Google Inspector คุณจะเห็น zIndex ตามลำดับ 2 ^ n - 1)

ฉันไม่สามารถแยกได้ว่าอะไรคือเหตุผลเฉพาะเจาะจงในรูปแบบต่าง ๆ ของ Math.Max ​​สำหรับ z-Index ที่นำไปสู่สถานการณ์นี้ แต่มันสามารถเกิดขึ้นได้และมันจะปรากฏเฉพาะกับผู้ใช้ไม่กี่คน (การทดสอบทั่วไปของฉันเกี่ยวกับ Browserstack ทำให้รหัสนี้ทำงานได้อย่างสมบูรณ์)

หวังว่านี่จะช่วยใครซักคน

ในกรณีของฉันปัญหาเกิดจากส่วนขยายเบราว์เซอร์ที่มีไฟล์ bootstrap.js ซึ่งมีการเพิ่มเหตุการณ์การแสดงสองครั้งและmodal-backdropเพิ่ม divs สองตัวแต่เมื่อปิด modal จะมีเพียงหนึ่งตัวเท่านั้นที่ถูกลบออก

พบว่าโดยการเพิ่มจุดพักการแก้ไขทรีย่อยให้กับองค์ประกอบร่างกายในโครเมี่ยมและติดตามการเพิ่มmodal-backdropdivs

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

});

อัปเดต: 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));

ตรวจสอบจำนวนโมดัลและเพิ่มค่าลงในแบคกราวน์เป็นดัชนี z

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