如何在Twitter Bootstrap中同时打开两个modal dialog

我在我的项目中实现了引导程序对话框。我在该对话框中有一些删除function，删除确认消息打开另一个引导对话框。但是当第二个确认对话框打开时，第一个对话框不会被禁用，所有事件都会起作用。

当另一个对话框打开时，是否有任何解决方案禁用原始对话框？

这是我的代码：

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开发中modal dialog的复杂性，您需要更多地了解z-index属性和堆栈上下文。

简而言之，该对话框的工作原理是向DOM添加两个主要组件：占据整个屏幕的背景，以及包含对话框的div。每个都从页面的其余部分中脱颖而出，因为它们放在DOM的根级别，并为其z-index属性赋予高值。 多高？ 好吧，尝试在空白页面中添加空白模态，您将看到以下DOM元素：

    <！ - z-index：1030;  - >
  <！ - z-index：1040;  - >
      <！ - z-index：1050;  - >

modal-backdrop给出了真实模态过程的错觉，因为它首先呈现了阻止点击在下方任何地方发射的所有其他内容。允许modal-dialog获得点击的唯一原因是它通过提供更高的z-index而堆叠在背景之上。

而已！ 这是一大堆技巧。因此，当bootstrap 警告不要使用多个对话框时，他们这样做是因为堆叠变得棘手。如果添加另一个元素，它将使用相同的精确z-index进行渲染，这意味着它将位于常规页面内容之上，但与原始对话框位于同一平面上。如果它没有完全覆盖原件，那么原件仍然可以点击，因为它上面没有背景。

解决方案：

为了解决这个问题，您需要提出自己的方法来禁用背景模式的点击。此问题似乎已得到（部分）解决。请参阅以下示例：

在jsFiddle演示

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(); }

在jsFiddle工作演示

截图：

作为概念validation，这里有一个Demo，允许您在其他对话框之上不断添加对话框

无限对话小提琴

结合更多笔记：

我正在使用我可以从以下GitHub项目中找到的唯一引导对话库：

http://nakupanda.github.io/bootstrap3-dialog/

在将来，如果您使用的是相对不常见的第三方库，那么直接链接到它而不是让人猜测会非常有帮助。在同样的说明中，一个工作小提琴本来可以节省一些时间，而不必重复你的努力。尝试生成能立即显示问题的内容，以便有人可以运行自己的代码版本并重现它。它使故障排除大约十分之一。

此外，您的实现看起来有一些不正确的属性。
我会改变以下内容：

onclick → action
content → message

你可以看到我的小提琴完全实现。

首先将类添加到主模态，所以：

我只是使用：

 $('#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方法隐藏实际模态

我的简单解决方案：为每个新模态生成一个新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'); } });