多重模态叠加
我需要覆盖层显示在第一个模态之上，而不是在后面。
$('#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>
我试图改变.modal-backdrop的z-index ，但是它变得一团糟。
在某些情况下，我在同一页面上有两个以上的模态。
在看到这个修复之后，没有一个是我所需要的，我想出了一个更短的解决scheme，这个解决scheme受@YermoLamers ＆@Ketwaroo启发。
背景z-index修复
此解决scheme使用setTimeout因为在触发show.bs.modal事件时，不会创build.modal-backdrop 。
$(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); });
- 这适用于在页面上创build的每个
.modal（即使是dynamic模式） - 背景立即覆盖了以前的模式
示例jsfiddle
如果您因为某种原因不喜欢硬编码的z-index，可以像这样计算页面中最高的z-index ：
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) { return +el.style.zIndex; })) + 10;
滚动条修复
如果您的页面上有超过浏览器高度的模式，则在closures第二个模式时无法滚动。 要解决这个添加：
$(document).on('hidden.bs.modal', '.modal', function () { $('.modal:visible').length && $(document.body).addClass('modal-open'); });
版本
该解决scheme使用bootstrap 3.1.0 – 3.3.5进行testing
我意识到一个答案已被接受，但我强烈build议不要黑客bootstrap来解决这个问题。
通过钩住shown.bs.modal和hidden.bs.modal事件处理程序并在那里调整z-index，可以非常容易地达到相同的效果。
这是一个工作的例子
有更多的信息可以在这里find。
这个解决scheme可以自动使用任意深度的栈模式。
脚本源代码：
$(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的build议，更短的版本，这似乎工作正常。 即使有淡入淡出的基本animation，甚至疯狂的蝙蝠侠报纸旋转。 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的build议，我想出了这个：
$(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');
即使在事实之后添加dynamic模式，并删除第二个滚动条问题。 最有意义的事情，我发现这有用的是集成窗体内部模态与来自Bootbox警报的validation反馈，因为那些使用dynamic模式，因此要求你绑定事件的文件，而不是.modal，因为它只附加到现有情态动词。
在这里拨弄。
我创build了一个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));
终于解决了。 我用很多方式testing过，工作正常。
下面是解决任何有同样问题的人：改变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()
这是我发现的最好的方法：检查打开了多less模态，并将模态和背景的z-index更改为更高的值。
当解决scheme堆叠模式滚动主页面时closures我发现新版本的Bootstrap（至less从版本3.0.3）不需要任何额外的代码来堆叠模态。
您可以添加多个模式（当然有不同的ID）到您的页面。 打开多个模式时唯一的问题是closures一个删除modal-open类的身体select器。
您可以使用以下Javascript代码重新添加modal-open ：
$('.modal').on('hidden.bs.modal', function (e) { if($('.modal').hasClass('in')) { $('body').addClass('modal-open'); } });
在不需要叠加模式的背景效果的情况下，可以设置data-backdrop="false" 。
版本3.1.1。 修正了修改模态背景覆盖模式的滚动条 ，但上述解决scheme似乎也适用于早期版本。
尝试在bootply上添加以下内容到您的JS
$（'＃myModal2'）。on（'show.bs.modal'，function（）{
$（'＃myModal'）.css（'z-index'，1030）; }）$（'＃myModal2'）。on（'hidden.bs.modal'，function（）{
$（'＃myModal'）。css（'z-index'，1040）; }）
说明：在使用属性（使用Chrome的开发工具）后，我发现任何低于1031的z-index值都会将背景放在背后。
所以通过使用引导程序的模态事件句柄，如果显示“＃myModal2”，则将z-index设置为1030，如果＃myModal2隐藏，则将z-index设置回1040。
Bootply： http ://bootply.com/86969
每次运行sys.showModal函数增量z-index并将其设置为新的模式。
function system() { this.modalIndex = 2000; this.showModal = function (selector) { this.modalIndex++; $(selector).modal({ backdrop: 'static', keyboard: true }); $(selector).modal('show'); $(selector).css('z-index', this.modalIndex ); } } var sys = new system(); sys.showModal('#myModal1'); sys.showModal('#myModal2');
下面是一些使用nth-of-typeselect器的CSS：
.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
每个模式应该被赋予一个不同的id，每个链接应该被定位到一个不同的模式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> ...
对我来说这个解决scheme是不使用我的模态div上的“淡入淡出”类。
编辑：引导3.3.4已经解决了这个问题（和其他模式问题），所以如果你可以更新你的引导CSS和JS将是最好的解决scheme。 如果你不能更新下面的解决scheme，仍然会工作，基本上和bootstrap 3.3.4（重新计算和应用填充）一样。
正如Bass Jobsen指出的那样，Bootstrap的新版本已经解决了z-index问题。 模式公开课和填充权对我来说仍然是个问题，但是这个由Yermo Lamers解决scheme启发的脚本解决了这个问题。 只要把它放在你的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')); });
我有一个类似的情况，经过一些研发，我发现了一个解决scheme。 虽然我不是很棒的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">×</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中添加全局variables
var modalBGIndex = 1040; // modal backdrop background var modalConIndex = 1042; // modal container data
//显示函数里面添加variables – 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
试试这个http://nakupanda.github.io/bootstrap3-dialog/#opening-multiple-dialogs
它应该很容易解决你的问题。
其他解决scheme并不适用于我的开箱即用。 我想也许是因为我使用的是更新版本的Bootstrap（3.3.2）….叠加层出现在modal dialog的顶部 。
我对代码进行了一些重构，并对调整模式背景的部分进行了评论。 这解决了这个问题。
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（）方法内。
为打开/closures多模态工作
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); } }); });
不幸的是我没有评论的声望，但应该指出的是，接受的解决scheme与1040 z-索引的硬编码基线似乎优于zIndex计算，试图find在页面上呈现的最大zIndex。
看起来，某些扩展/插件依赖顶层的DOM内容，这使得.Max计算成为一个极其庞大的数字，因此无法进一步增加zIndex。 这会导致覆盖层出现在模式上的模式不正确（如果使用Firebug / Google Inspector工具，您会看到大小为2 ^ n – 1的zIndex）
我一直无法确定Math.Max for z-Index的各种forms的具体原因是否会导致这种情况，但是这种情况可能会发生，并且对于less数用户来说，它似乎是唯一的。 （我在浏览器上的一般testing有这个代码完美的工作）。
希望这有助于某人。
在我的情况下，问题是由包含bootstrap.js文件的浏览器扩展引起的，其中show事件处理了两次，添加了两个modal-backdrop div，但是当closures模式时，只有一个被删除。
发现通过在chrome中为body元素添加一个子树修改断点，并跟踪添加modal-backdrop div。
请遵照指示
1.首先给你的模式popup窗口，你想给perioty eX的id：id ='testmodal'
2.在风格上，你可以像下面那样弄脏CSS，值2147483647是你可以给出的最高值。
#testmodal.fade.in{ z-index: 2147483647; }
这个CSS类将适用于你想要应用的模式，因为如果你有多个popup窗口，那么你将首先searchid = testmodal，然后你可以根据你的优先级设置“z-index”，意味着更高的优先级将得到较高的Z指数值
$(window).scroll(function(){ if($('.modal.in').length && !$('body').hasClass('modal-open')) { $('body').addClass('modal-open'); } });
看一下这个！ 这个解决scheme解决了我的问题，几条简单的CSS线：
.modal:nth-of-type(even) { z-index: 1042 !important; } .modal-backdrop.in:nth-of-type(even) { z-index: 1041 !important; }
这里是我find它的地方的一个链接： Bootply只要确保需要在Top上出现的.modual是HTML代码中的第二个，那么CSS就可以find它“even”。
