jquery - 如何在另一个引导模式位置上显示引导模式对话框

Question

如何在另一个引导模态上显示引导模态对话框 我在模态按钮单击时有一个模态对话框 我打开另一个模态窗口，该窗口在该窗口之后和第一个模态上显示？我尝试使用 z-index 但它不起作用。

Answer 1

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

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

Answer 2

添加这些 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 类的模式）

Answer 3

这个解决方案很脏，我的场景是模态中的表单通过 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 打开页面
• 打开真正的引导模式
• 打开 Chrome 开发者控制台
• 粘贴我的代码并按 ENTER

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