twitter-bootstrap 如何在另一个引导模态位置上显示引导模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16035955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show bootstrap modal dialog over another bootstrap modal position
提问by dhruwal patel
How to show bootstrap modal dialog over another bootstrap modalI have one modal dialogue on button click of modal I open another modal window which show after that window and over first modal ? I tried with z-index but it is not working.
如何在另一个引导程序模态上显示引导程序模态对话框我在单击模态按钮时有一个模态对话框我打开另一个模态窗口，该窗口在该窗口之后和第一个模态上显示？我尝试使用 z-index 但它不起作用。
回答by Julien
You should take a look at this repo : https://github.com/jschr/bootstrap-modal/
你应该看看这个仓库：https: //github.com/jschr/bootstrap-modal/
It extends Bootstrap'modal plugin to allow multiple modal (and other things)
它扩展了 Bootstrap 的模态插件以允许多个模态（和其他东西）
回答by nulll
This solution is very dirty, my scenario was that a form inside a modal submits via ajax, if the response is late I wanted to put another overlay and another modal saiyng "sorry i'm late"
这个解决方案非常脏，我的场景是模态内的表单通过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>');
as you can see, the overlay i'm creating has a z-layout that is higher than the one of standard bootstrap modals (1040)
如您所见，我正在创建的叠加层的 z 布局高于标准引导模式 (1040) 之一
<div class="my-dirty-solution modal-backdrop fade in" style="z-index: 1041;"></div>
Both, the overlay and the modal that I added could be accessed and destroyed with
我添加的覆盖和模态都可以访问和销毁
$('.my-dirty-solution').remove();
You could see it in action this way:
您可以通过以下方式看到它的运行情况：
- open with Chrome the page
- open the real bootstrap modal
- open Chrome Dev Console
- paste my code and press ENTER
- 用 Chrome 打开页面
- 打开真正的引导模式
- 打开 Chrome 开发者控制台
- 粘贴我的代码并按 ENTER
Remember, it's a very dirty and cheeky solution... ;)
请记住，这是一个非常肮脏和厚颜无耻的解决方案......;）
回答by lkurylo
Add these css classes:
添加这些 css 类：
.first-level-dialog {
z-index: 1060;
}
.second-level-dialog {
z-index: 1040 !important;
}
The first one add to the dialog container (this one with modal css class) that you want to have on first plan (above other).
第一个添加到您希望在第一个计划（高于其他计划）中拥有的对话框容器（这个带有模态 css 类的容器）。
Finally add handlers for dialog events:
最后为对话框事件添加处理程序：
$(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');
});
As #modalid set id of the modal you want to have on first plan (the one with the first-level-dialog css class specified)
作为#modalid 设置您想要在第一个计划中使用的模式的 id（指定了第一级对话框 css 类的那个）
