如何在另一个引导程序模式上显示引导模式对话框 我有一个模态对话按钮点击模态我打开另一个模态窗口,显示在该窗口后和第一个模态? 我尝试使用z-index但它无法正常工作。
答案 0 :(得分:1)
你应该看看这个回购:https://github.com/jschr/bootstrap-modal/
它扩展了Bootstrap'modal插件以允许多个模态(和其他东西)
答案 1 :(得分:0)
这个解决方案很脏,我的场景是模态中的一个表单通过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();
你可以通过这种方式看到它:
请记住,这是一个非常肮脏和厚颜无耻的解决方案......;)
答案 2 :(得分:0)
添加这些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类的那个)