17

我已经在我的项目中实现了引导对话框。我在该对话框中有一些删除功能，删除确认消息会打开另一个引导对话框。但是当第二个确认对话框打开时，第一个对话框没有被禁用并且所有事件都有效。

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

这是我的代码：

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

截屏：

截屏

当删除确认对话框打开时，我想禁用第一个对话框。

4

4 回答 4

59

问题：

为了理解 Web 开发中模态对话框的复杂性，您需要更多地了解z-index 属性和堆叠上下文。

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

<div class="modal-backdrop fade in"></div> <!-- z-index: 1030; -->
<div class="modal bootstrap-dialog"> <!-- z-index: 1040; -->
    <div class="modal-dialog"> <!-- z-index: 1050; -->

这modal-backdrop给人一种真正的模态过程的错觉，因为它呈现在所有其他内容之上，从而防止点击在下面的任何地方触发。允许接收点击的唯一原因modal-dialog是因为它通过提供更高的 z-index堆叠在背景之上。

而已！ 这就是整个套路。因此，当引导程序警告不要使用多个对话框时，他们这样做是因为堆叠变得棘手。如果您添加另一个元素，它会以相同的精确值呈现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 中的工作演示

截屏：

截屏

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

无限对话框小提琴

用户体验警告：

虽然这在技术上是可以实现的，但modals 中的 modals 可能会产生令人困惑的 UX，因此如果您遇到问题，正确的答案可能是尝试通过采用原始工作流程并将其提升为带有 url 的完整页面设计来完全避免它和状态。

于 2014-04-25T23:54:15.687 回答
1

首先将类添加到主要模式中：<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);

}

尝试对我来说看起来不错。

于 2015-05-19T10:32:06.170 回答
0

我不起眼的解决方案：为每个新模式生成一个新 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');
    }
});
于 2016-06-02T19:48:42.367 回答
0

只需使用 onclick 方法隐藏实际模式

<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
    Text Button
</button>
于 2016-03-18T18:31:43.467 回答