Tôi cần lớp phủ hiển thị phía trên phương thức đầu tiên, không phải ở phía sau.
Tôi cố gắng để thay đổi z-indexcủa .modal-backdrop, nhưng nó trở thành một mớ hỗn độn.
Trong một số trường hợp, tôi có nhiều hơn hai phương thức trên cùng một trang.
Tôi cần lớp phủ hiển thị phía trên phương thức đầu tiên, không phải ở phía sau.
Tôi cố gắng để thay đổi z-indexcủa .modal-backdrop, nhưng nó trở thành một mớ hỗn độn.
Trong một số trường hợp, tôi có nhiều hơn hai phương thức trên cùng một trang.
Câu trả lời:
Sau khi thấy nhiều bản sửa lỗi cho điều này, và không ai trong số chúng là chính xác những gì tôi cần, tôi đã đưa ra một giải pháp thậm chí ngắn hơn lấy cảm hứng từ @YermoLamers & @Ketwaroo.
Khắc phục chỉ số z phía sau
Giải pháp này sử dụng setTimeoutvì .modal-backdropkhông được tạo khi sự kiện show.bs.modalđược kích hoạt.
$(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được tạo trên trang (ngay cả phương thức động)Nếu bạn không thích chỉ mục z được mã hóa cứng vì bất kỳ lý do gì, bạn có thể tính chỉ số z cao nhất trên trang như thế này:
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;Sửa chữa thanh cuộn
Nếu bạn có một phương thức trên trang của bạn vượt quá chiều cao trình duyệt, thì bạn không thể cuộn trong đó khi đóng một phương thức thứ hai. Để sửa lỗi này, hãy thêm:
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});Các phiên bản
Giải pháp này được thử nghiệm với bootstrap 3.1.0 - 3.3.5
.not(this)dòng thứ hai) để làm cho nó hoạt động với công var zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
Tôi nhận ra một câu trả lời đã được chấp nhận, nhưng tôi thực sự khuyên bạn không nên hack bootstrap để sửa lỗi này.
Bạn có thể dễ dàng đạt được hiệu ứng tương tự bằng cách nối các trình xử lý sự kiện display.bs.modal và hidden.bs.modal và điều chỉnh chỉ số z ở đó.
Một chút thông tin có sẵn ở đây.
Giải pháp này hoạt động tự động với các phương thức ngăn xếp sâu tùy ý.
Mã nguồn tập lệnh:
$(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');
});
});Một phiên bản ngắn hơn dựa trên đề xuất của Yermo Lamers, điều này dường như hoạt động tốt. Ngay cả với các hình ảnh động cơ bản như mờ dần trong / ngoài và thậm chí cả tờ báo batman điên rồ xoay. 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');
});modal-openlớp trên thành phần cơ thể: jsfiddle.net/vkyjocyn
Kết hợp câu trả lời của A1rPun với gợi ý của StriplingWar Warrior, tôi đã nghĩ ra điều này:
$(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');Hoạt động ngay cả đối với các phương thức động được thêm vào sau khi thực tế và loại bỏ sự cố thanh cuộn thứ hai. Điều đáng chú ý nhất mà tôi thấy hữu ích này là tích hợp các biểu mẫu bên trong các chế độ với phản hồi xác thực từ các cảnh báo Bootbox, vì chúng sử dụng các phương thức động và do đó yêu cầu bạn liên kết sự kiện với tài liệu thay vì .modal, vì điều đó chỉ gắn nó với hiện tại phương thức.
Tôi đã tạo một plugin Bootstrap kết hợp rất nhiều ý tưởng được đăng ở đây.
Bản trình diễn trên Bootply: http://www.bootply.com/cObcYInvpq
Github: https://github.com/jhaygt/bootstrap-multimodal
Nó cũng giải quyết vấn đề với các phương thức liên tiếp làm cho phông nền trở nên tối hơn và tối hơn. Điều này đảm bảo rằng chỉ có một phông nền có thể nhìn thấy tại bất kỳ thời điểm nào:
if(modalIndex > 0)
$('.modal-backdrop').not(':first').addClass('hidden');Chỉ số z của phông nền hiển thị được cập nhật trên cả show.bs.modalvà hidden.bs.modalsự kiện:
$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));Khi giải các chế độ Xếp chồng cuộn trang chính khi đóng, tôi thấy rằng các phiên bản Bootstrap mới hơn (ít nhất là từ phiên bản 3.0.3) không yêu cầu bất kỳ mã bổ sung nào để xếp chồng các chế độ.
Bạn có thể thêm nhiều phương thức (tất nhiên là có ID khác) vào trang của bạn. Vấn đề duy nhất được tìm thấy khi mở nhiều hơn một phương thức sẽ là việc đóng một loại bỏ modal-openlớp cho bộ chọn cơ thể.
Bạn có thể sử dụng mã Javascript sau để thêm lại modal-open:
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});Trong trường hợp không cần hiệu ứng nền cho phương thức xếp chồng bạn có thể đặt data-backdrop="false".
Phiên bản 3.1.1. Đã sửa lỗi Phông nền phương thức phủ lên thanh cuộn của phương thức , nhưng giải pháp trên dường như cũng hoạt động với các phiên bản trước.
Cuối cùng cũng được giải quyết. Tôi đã thử nghiệm nó theo nhiều cách và hoạt động tốt.
Đây là giải pháp cho bất kỳ ai gặp vấn đề tương tự: Thay đổi hàm Modal.prototype.show (tại bootstrap.js hoặc modal.js)
TỪ:
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()ĐẾN:
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()Đó là cách tốt nhất mà tôi tìm thấy: kiểm tra xem có bao nhiêu phương thức được mở và thay đổi chỉ số z của phương thức và phông nền thành giá trị cao hơn.
Nếu bạn đang tìm kiếm giải pháp Bootstrap 4, có một cách dễ dàng bằng CSS thuần túy:
.modal.fade {
background: rgba(0,0,0,0.5);
}Hãy thử thêm các mục sau vào JS của bạn trên bootply
$('#myModal2').on('show.bs.modal', function () {
$('#myModal').css('z-index', 1030); })
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal').css('z-index', 1040); })Giải trình:
Sau khi chơi xung quanh với các thuộc tính (sử dụng công cụ phát triển của Chrome), tôi đã nhận ra rằng bất kỳ z-indexgiá trị nào bên dưới 1031sẽ đặt mọi thứ phía sau phông nền.
Vì vậy, bằng cách sử dụng tay cầm kiện modal bootstrap của tôi đặt z-indexvào 1030. Nếu #myModal2được hiển thị và đặt z-indextrở lại 1040nếu #myModal2được ẩn.
Mỗi khi bạn chạy chỉ mục z tăng chỉ số sys.showModal và đặt nó thành phương thức mới của bạn.
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');Giải pháp cho vấn đề này đối với tôi là KHÔNG sử dụng lớp "fade" trên các div phương thức của tôi.
Không có giải pháp tập lệnh, chỉ sử dụng css khi bạn có hai lớp phương thức, đặt phương thức thứ 2 thành chỉ mục z cao hơn
.second-modal { z-index: 1070 }
div.modal-backdrop + div.modal-backdrop {
z-index: 1060;
}Nếu bạn muốn một phương thức cụ thể xuất hiện trên đầu của một phương thức mở khác, hãy thử thêm HTML của phương thức trên cùng sau phương thức khác div.
Điều này làm việc cho tôi:
<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" ... />Giải pháp của tôi cho bootstrap 4, làm việc với độ sâu không giới hạn của phương thức và phương thức động.
$('.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', '');
});Mỗi phương thức nên được cung cấp một id khác nhau và mỗi liên kết nên được nhắm mục tiêu đến một id phương thức khác nhau. Vì vậy, nó phải là một cái gì đó như thế:
<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 đã giải quyết vấn đề này (và các vấn đề phương thức khác) vì vậy nếu bạn có thể cập nhật CSS và JS bootstrap của mình thì đó sẽ là giải pháp tốt nhất. Nếu bạn không thể cập nhật giải pháp bên dưới vẫn sẽ hoạt động và về cơ bản sẽ thực hiện tương tự như bootstrap 3.3.4 (tính toán lại và áp dụng phần đệm).
Như Bass Jobsen đã chỉ ra, các phiên bản mới hơn của Bootstrap đã giải quyết được chỉ số z. Lớp mở modal và padding-right vẫn là vấn đề đối với tôi nhưng kịch bản này lấy cảm hứng từ giải pháp Yermo Lamers đã giải quyết nó. Chỉ cần thả nó vào tệp JS của bạn và tận hưởng.
$(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'));
});Kiểm tra này! Giải pháp này đã giải quyết vấn đề cho tôi, một vài dòng CSS đơn giản:
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}Đây là một liên kết đến nơi tôi tìm thấy nó: Bootply Chỉ cần đảm bảo rằng .modual cần xuất hiện trên Top là thứ hai trong mã HTML, vì vậy CSS có thể tìm thấy nó là "chẵn".
làm việc cho nhiều chế độ mở / đóng
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);
}
});
});Bản giới thiệu
Đây là một số CSS sử dụng các nth-of-typebộ chọn dường như hoạt động:
.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
Tôi đã có một kịch bản tương tự, và sau một chút R & D tôi đã tìm thấy một giải pháp. Mặc dù tôi không giỏi về JS nhưng tôi vẫn có thể viết ra một truy vấn nhỏ.
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">×</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);
});Thêm biến toàn cục trong modal.js
var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data // hiển thị hàm bên trong thêm biến - 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 addclassCác giải pháp khác không làm việc cho tôi ra khỏi hộp. Tôi nghĩ có lẽ bởi vì tôi đang sử dụng một phiên bản Bootstrap mới hơn (3.3.2) .... lớp phủ đã xuất hiện trên đầu hộp thoại phương thức.
Tôi đã cấu trúc lại mã một chút và nhận xét phần đang điều chỉnh bối cảnh phương thức. Điều này đã khắc phục vấn đề.
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');
});Là một lưu ý phụ, nếu bạn muốn sử dụng điều này trong AngularJs, chỉ cần đặt mã bên trong phương thức .run () của mô-đun.
Thật không may, tôi không có tiếng tăm để bình luận, nhưng cần lưu ý rằng giải pháp được chấp nhận với đường cơ sở được mã hóa cứng của chỉ số 1040 z dường như vượt trội hơn so với tính toán z Index cố gắng tìm ra chỉ số z Index tối đa được hiển thị trên trang.
Dường như các tiện ích mở rộng / plugin nhất định dựa trên nội dung DOM cấp cao nhất khiến cho phép tính .Max trở thành một con số quá lớn, đến mức nó không thể tăng thêm z Index nữa. Điều này dẫn đến một phương thức trong đó lớp phủ xuất hiện trên phương thức không chính xác (nếu bạn sử dụng các công cụ Firebird / Google Inspector, bạn sẽ thấy một z Index theo thứ tự 2 ^ n - 1)
Tôi chưa thể tách biệt lý do cụ thể của các dạng Math.Max cho z-Index dẫn đến kịch bản này là gì, nhưng nó có thể xảy ra và nó sẽ xuất hiện duy nhất cho một số người dùng. (Các thử nghiệm chung của tôi trên browserstack đã có mã này hoạt động hoàn hảo).
Hy vọng điều này sẽ giúp được ai đó.
Trong trường hợp của tôi, sự cố xảy ra do tiện ích mở rộng trình duyệt bao gồm các tệp bootstrap.js trong đó sự kiện hiển thị được xử lý hai lần và hai modal-backdropdiv được thêm vào, nhưng khi đóng chế độ, chỉ một trong số chúng bị xóa.
Tìm thấy rằng bằng cách thêm một điểm dừng sửa đổi cây con vào phần tử cơ thể trong chrome và theo dõi thêm các modal-backdropdiv.
$(window).scroll(function(){
if($('.modal.in').length && !$('body').hasClass('modal-open'))
{
$('body').addClass('modal-open');
}
});Cập nhật: 22.01.2019, 13.41 Tôi đã tối ưu hóa giải pháp bằng jhay, cũng hỗ trợ đóng và mở các hộp thoại giống nhau hoặc khác nhau khi ví dụ bước từ dữ liệu chi tiết này sang dữ liệu chi tiết khác hoặc ngược lại.
(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));Đối với tôi, các quy tắc scss đơn giản này hoạt động hoàn hảo:
.modal.show{
z-index: 1041;
~ .modal.show{
z-index: 1043;
}
}
.modal-backdrop.show {
z-index: 1040;
+ .modal-backdrop.show{
z-index: 1042;
}
}Nếu các quy tắc này làm cho phương thức sai được đặt lên hàng đầu trong trường hợp của bạn, hãy thay đổi thứ tự của div phương thức của bạn hoặc thay đổi (lẻ) thành (chẵn) trong scss ở trên.
Kiểm tra số lượng phương thức và thêm giá trị vào phông nền dưới dạng chỉ mục 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');