Question

我需要叠加显示在第一个模态上方，而不是在后面。

$('#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的{{1}}，但它变得一团糟。

在某些情况下，我在同一页面上有两个以上的模态。

Answer 1

看到许多修复后，并没有一个完全符合我的要求，我想出了一个更短的解决方案，灵感来自@YermoLamers＆amp; @Ketwaroo。

背景z-index修复
此解决方案使用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（甚至是动态模态）
背景立即覆盖上一个模态

Example jsfiddle

如果您因任何原因不喜欢硬编码的z-index，可以在页面上calculate the highest z-index这样：

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

测试此解决方案

Answer 2

我意识到答案已被接受，但我强烈建议不要黑客攻击来解决这个问题。

您可以通过挂钩shown.bs.modal和hidden.bs.modal事件处理程序并在那里调整z-index来轻松实现相同的效果。

Here's a working example

更多信息是available here.

此解决方案可自动使用任意深度堆栈模式。

脚本源代码：

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

    });        
});

Answer 3

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

Answer 4

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

即使对于事后添加的动态模态也可以工作，并删除第二个滚动条问题。我发现这个最有用的东西是将模态中的表单与来自Bootbox警报的验证反馈集成，因为那些使用动态模态，因此需要将事件绑定到文档而不是.modal，因为它只将它附加到现有模态。

Fiddle here.

Answer 5

我创建了一个Bootstrap插件，其中包含了很多这里发布的想法。

Bootply上的演示：http://www.bootply.com/cObcYInvpq

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

它还解决了连续模态导致背景变暗和变暗的问题。这可确保在任何给定时间只能看到一个背景幕：

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

show.bs.modal和hidden.bs.modal事件均更新了可见背景的z-index：

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

Answer 6

解决Stacking modals scrolls the main page when one is closed时，我发现Bootstrap的新版本（至少从版本3.0.3开始）不需要任何额外的代码来堆叠模态。

您可以在页面中添加多个模式（当然具有不同的ID）。打开多个模态时发现的唯一问题是关闭一个会删除正文选择器的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。固定Fix modal backdrop overlaying the modal's scrollbar，但上述解决方案似乎也适用于早期版本。

Answer 7

终于解决了。我在很多方面对它进行了测试并且工作正常。

以下是遇到同样问题的人的解决方案：更改 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()

这是我找到的最佳方式：检查打开了多少个模态，并将模态和背景的z-index更改为更高的值。

Answer 8

Bootstrap 4.5的简单解决方案

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

.modal-backdrop.fade {
  opacity: 0;
}

Answer 9

尝试在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的开发工具），我意识到z-index以下的任何1031值都会将事物置于背景之下。

因此，通过使用bootstrap的模态事件句柄，我将z-index设置为1030。如果显示#myModal2，则如果z-index被隐藏，则将1040设置回#myModal2。

<强> Demo

Answer 10

我的Bootstrap 4解决方案，可以使用无限深度的模态和动态模态。

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

Answer 11

每次运行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');

Answer 12

每个模态应该被赋予不同的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>
...

Answer 13

如果您正在寻找Bootstrap 4解决方案，那么有一个简单的使用纯CSS的解决方案：

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

Answer 14

适用于打开/关闭多模态

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#

Answer 15

对我来说解决这个问题的方法是不要使用＆＃34; fade＆＃34;我的模态div上的课程。

Answer 16

编辑：Bootstrap 3.3.4解决了这个问题（以及其他模态问题）所以如果你能更新你的bootstrap CSS和JS那将是最好的解决方案。如果您无法更新下面的解决方案仍然可以工作，并且基本上与bootstrap 3.3.4相同（重新计算并应用填充）。

正如Bass Jobsen指出的那样，较新版本的Bootstrap已经解决了z-index问题。模态开放类和padding-right对我来说仍然是个问题，但这个受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'));
});

Answer 17

检查模态数并将其值添加到背景中作为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');

Answer 18

A1rPun 的答案在稍作修改后完美运行（Bootstrap 4.6.0）。我的声誉不允许我发表评论，所以我会发布答案。

我刚刚将每个 .modal:visible 替换为 .modal.show。

所以，在打开多个模式时修复背景：

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal.show').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

并且，修复滚动条：

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

Answer 19

如果您希望特定的模式出现在另一个打开的模式的顶部，请尝试在另一个模式div之后的后面添加最顶层的模式的HTML。

这对我有用：

<div id="modal-under" class="modal fade" ... />  <div id="modal-upper" class="modal fade" ... />

Answer 20

对我来说，这些简单的scss规则非常有效：

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

如果这些规则导致错误的模态出现在您的情况中，请更改模态div的顺序，或者在上面的scss中将（奇数）更改为（偶数）。

Answer 21

更新：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));

Answer 22

此代码仅适用于引导程序4。其他代码中的问题是如何选择模式背景。显示模态后，最好在实际模态上使用jQuery next select。

$(document).on('show.bs.modal', '.modal', function () {
        var zIndex = 1040 + (10 * $('.modal').length);
        var model = $(this);
        model.css('z-index', zIndex);
        model.attr('data-z-index', zIndex);
    });

    $(document).on('shown.bs.modal', '.modal', function () {
        var model = $(this);
        var zIndex = model.attr('data-z-index');
        model.next('.modal-backdrop.show').css('z-index', zIndex - 1);
  
  });

Answer 23

有时序列可能导致混乱！先写第一个模态然后再写第二个模态

Answer 24

没有脚本解决方案，仅使用css给出两层模态，将第二模态设置为更高的z索引

.second-modal { z-index: 1070 }

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

Answer 25

检查一下！这个解决方案为我解决了这个问题，很少有简单的CSS行：

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

以下是我找到它的链接：Bootply 只需确保需要在Top上出现的.modual在HTML代码中排在第二位，因此CSS可以将其命名为＆＃34;甚至＆＃34;。

Answer 26

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

});

Answer 27

在我的情况下，问题是由包含bootstrap.js文件的浏览器扩展引起的，其中show事件处理了两次并且添加了两个modal-backdrop div，但是当关闭模式时，只删除其中一个。

通过向chrome中的body元素添加子树修改断点，并跟踪添加modal-backdrop div。

Answer 28

不幸的是我没有评论的声誉，但应该注意的是，使用1040 z-index的硬编码基线的公认解决方案似乎优于尝试查找正在呈现的最大zIndex的zIndex计算页面。

似乎某些扩展/插件依赖于顶级DOM内容，这使得.Max计算如此大量，以至于它无法进一步增加zIndex。这会产生一个模态，其中叠加层不正确地显示在模态上（如果使用Firebug / Google Inspector工具，您将看到大约2 ^ n - 1的zIndex）

我还没有能够找出各种形式的Math.Max for z-Index导致这种情况的具体原因，但它可能会发生，并且对于少数用户而言似乎是独一无二的。（我对browserstack的一般测试使这段代码运行良好）。

希望这有助于某人。

Answer 29

其他解决方案对我来说不起作用。我想也许是因为我使用的是更新版本的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（）方法中。

Answer 30

在modal.js中添加全局变量

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

//在add变量中显示函数 - 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

Answer 31

我有类似的情况，经过一点点R＆amp; D我找到了解决方案。虽然我在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);

});

Answer 32

以下是一些使用nth-of-type选择器的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

Answer 33

请遵循指示
1.首先给你想给perioty eX的模态弹出窗口任何id：id ='testmodal'
2.在风格上你可以玷污下面的css，值2147483647是你可以作为z索引给出的最高值。

#testmodal.fade.in{
    z-index: 2147483647;
}

此css类将适用于您要应用的模式，因为它将首先搜索id = testmodal 如果您有多个弹出窗口，那么您可以根据您的优先级设置“z-index”，“意味着更高的优先级将获得更高的z-index值

Answer 34

这是一个非常古老的威胁，但对我来说只是将我想要的模态的 html 代码移到文件的第一位。

多个模态叠加

34 个答案:

Example jsfiddle