[英]How to open two modal dialogs in Twitter Bootstrap at the same time
我在我的项目中实现了引导程序对话框。 我在该对话框中有一些删除功能,删除确认消息打开另一个引导对话框。 但是当第二个确认对话框打开时,第一个对话框不会被禁用,所有事件都会起作用。
是否有任何解决方案在另一个对话框打开时禁用原始对话框?
这是我的代码:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
content: content,
buttons: [{
label: 'Save',
cssClass: 'btn-primary',
id: 'btnSave',
onclick: function (dialog) {
}
},
{
label: 'Close',
cssClass: 'btn',
id: 'btnClose',
onclick: function (dialog) {
if (callback != "") {
callback(true);
}
dialog.close();
}
}]
});
dlg.open();`
}
当删除确认对话框打开时,我想禁用第一个对话框。
为了理解Web开发中模态对话框的复杂性,您需要更多地了解z-index属性和堆栈上下文 。
简而言之,该对话框的工作原理是向DOM添加两个主要组件:占据整个屏幕的背景,以及包含对话框的div。 其中每个都从页面的其余部分中脱颖而出,因为它们被置于DOM的根级别,并为其z-index
属性赋予高值。 多高? 好吧,尝试在空白页面中添加空白模态,您将看到以下DOM元素:
<div class="modal-backdrop fade in"></div> <!-- --> <div class="modal bootstrap-dialog"> <!-- --> <div class="modal-dialog"> <!-- -->
modal-backdrop
给出了真实模态过程的错觉,因为它首先呈现了阻止点击在下方任何地方发射的所有其他内容。 允许modal-dialog
获得点击的唯一原因是,它通过提供更高的z-index而堆叠在背景之上 。
而已! 这是一大堆技巧。 因此,当bootstrap 警告不要使用多个对话框时 ,他们这样做是因为堆叠变得棘手。 如果添加另一个元素,它将使用相同的精确z-index
进行渲染,这意味着它将位于常规页面内容之上,但与原始对话框位于同一平面上。 如果它没有完全覆盖原件,那么原件仍然可以点击,因为它上面没有背景。
为了解决这个问题,您需要提出自己的方法来禁用背景模式的点击。 此问题似乎已( 部分 )得到解决。 请参阅以下示例:
Bootstrap Dialog使得单击关闭对话框只会关闭DOM中的最后一个对话框并将事件标记为已处理,因此它不会触发其他任何内容。 如果第二个模态已启动并且您单击它,则唯一会发生的是第二个模态将关闭。
如果你想让第二个模态看起来像第一个模态,那么你必须手动完成。
当创建新模态时,它会带有它自己的modal-backdrop
。 当显示第二个模态时,您可以通过相对于第一个模态递增其z-index使其显示在原始模式上方。 在onshown
事件中,我们只需要抓取当前模态并使用.CSS
方法重叠并修改z-index。 我们希望它出现在任何现有的模态之上,所以首先我们将计算DOM中的模态数( $('.bootstrap-dialog').length
)然后递增z-index,使其高于下一个最高值对话。
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
message: content,
onshown: function(dialog) { var tier = $('.bootstrap-dialog').length - 1; dialog.$modal.prev(".modal-backdrop") .css("z-index", 1030 + tier * 30); dialog.$modal .css("z-index", 1040 + tier * 30); }
// More Settings
}).open();
}
作为概念验证,这里有一个Demo,允许您在其他对话框之上不断添加对话框
虽然这在技术上是可以实现的,但是模态中的模态可能会产生令人困惑的UX ,因此如果遇到问题,正确答案可能是通过采用原始工作流并将其推广到带有URL的整页设计来完全避免它和州。
首先将类添加到主模态,所以: <div class="modal-content kk">
我只是使用:
$('#myModal1').on('shown.bs.modal', function () {
$('.kk').addClass('magla');
$('#myModal').modal('hide');
});
$('#myModal1').on('hidden.bs.modal', function () {
$('.kk').removeClass('magla');
$('#myModal').modal('show');
});
其中.magla css是:
.magla {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
试试看起来对我不错。
只需使用onclick方法隐藏实际模态
<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
Text Button
</button>
我不起眼的解决方案:为每个新模态生成一个新ID。 然后通过一个变量管理所有内容。 这是为了我的目的,顺便说一下。
var _MODAL_LAST;
$( document ).on( 'show.bs.modal' , '.modal' , function(){
_MODAL_LAST = $(this);
});
$( document ).on( 'hide.bs.modal' , '.modal' , function(){
if( _MODAL_LAST.attr('id') !== $(this).attr('id') ){
return false;
}else{
_MODAL_LAST = $(this).prevAll('.modal:first');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.