默认情况下,bootstrap模态框是不支持多个覆盖的,下面是一个解决办法(本人亲测),
将下面的代码复制到当前需要多个模态框的页面,问题就可以解决
$(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs.modal', '.modal.in', function(event) { setModalsAndBackdropsOrder(); }).on('hidden.bs.modal', '.modal', function(event) { setModalsAndBackdropsOrder(); }); function setModalsAndBackdropsOrder() { var modalZIndex = 1040; $('.modal.in').each(function(index) { var $modal = $(this); modalZIndex++; $modal.css('zIndex', modalZIndex); $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1); }); $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden'); }