Question

如何在另一个引导程序模式上显示引导模式对话框 我有一个模态对话按钮点击模态我打开另一个模态窗口，显示在该窗口后和第一个模态？我尝试使用z-index但它无法正常工作。

Answer 1

你应该看看这个回购：https://github.com/jschr/bootstrap-modal/

它扩展了Bootstrap'modal插件以允许多个模态（和其他东西）

Answer 2

这个解决方案很脏，我的场景是模态中的一个表单通过ajax提交，如果响应迟到我想放另一个叠加和另一个模态saiyng“抱歉我迟到了”

$('body').prepend('<div id="signup-box" class="ajax-is-late widget-box modal-dialog visible"><div class="modal-content"><div class="modal-body"><span style="font-size:25px; margin-left:20px;">bla bla bla...</span></div></div></div><div class="my-dirty-solution modal-backdrop fade in" style="z-index: 1041;"></div>');

如您所见，我正在创建的叠加层的z布局高于标准自举模式（1040）

<div class="my-dirty-solution modal-backdrop fade in" style="z-index: 1041;"></div>

我添加的叠加层和模态都可以通过

访问和销毁

$('.my-dirty-solution').remove();

你可以通过这种方式看到它：

使用Chrome打开页面
打开真正的bootstrap模态
打开Chrome开发者控制台
粘贴我的代码并按ENTER

请记住，这是一个非常肮脏和厚颜无耻的解决方案......;）

Answer 3

添加这些css类：

 .first-level-dialog {
    z-index: 1060;
}

.second-level-dialog {
    z-index: 1040 !important;
}

第一个添加到您想要在第一个计划（在其他计划之上）的对话框容器（这个具有模态css类）。

最后为对话事件添加处理程序：

$(document).on('shown.bs.modal', '#modalid', function (e) {
        $('.modal:not(.first-level-dialog)').addClass('second-level-dialog');
    });

    $(document).on('hide.bs.modal', '#modalid', function (e) {
        $('.modal').removeClass('second-level-dialog');
    });

作为#modalid设置你想要在第一个计划上具有的模态的id（指定了第一级对话css类的那个）

如何在另一个bootstrap模式位置上显示bootstrap模态对话框

3 个答案: