如何防止 angular-ui 模态关闭？

Posted 2023-02-21

【中文标题】如何防止 angular-ui 模态关闭？

【英文标题】：How do I prevent angular-ui modal from closing?

【发布时间】：2013-12-15 16:34:37

【问题描述】：

我在我的项目中使用 Angular UI $modal http://angular-ui.github.io/bootstrap/#/modal

我不希望用户通过按下背景来关闭模式。我想要一个模式只能通过按下我创建的关闭按钮来关闭。

如何防止模态关闭？

【参考方案1】：

在创建模态框时，您可以指定其行为：

$modal.open(
   // ... other options
   backdrop  : 'static',
   keyboard  : false
);

【讨论】：

是的，这是正确答案 :) 谢谢分享！

酷！感谢分享。 +1

有没有办法动态设置这些——比如弹出窗口是否在一个不应该被中断的操作中间？

【参考方案2】：

backdrop : 'static'

适用于“点击”事件，但您仍然可以使用“Esc”键关闭弹出窗口。

keyboard :false

防止弹出窗口按“Esc”键关闭。

感谢 pkozlowski.opensource 的回答。

我认为问题是重复的 Angular UI Bootstrap Modal - how to prevent user interaction

【参考方案3】：

老问题，但如果您想在各种关闭操作上添加确认对话框，请将其添加到您的模态实例控制器中：

$scope.$on('modal.closing', function(event, reason, closed) 
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason)
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";
            break;

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";
            break;

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
            break;
    
    if (!confirm(message)) 
        event.preventDefault();
    
);

我的右上角有一个关闭按钮，它触发“取消”操作。单击背景（如果启用）会触发取消操作。您可以使用它为各种关闭事件使用不同的消息。

【讨论】：

它如何回答我的问题？

有了这个，如果一个模态被指示关闭，你可以通过指令的原因来拦截。基于此，您可以根据需要添加自定义逻辑，或者在实际关闭模式之前提示用户确认。

如问题所述，告诉我一个逻辑，它会阻止模态关闭？

如果这就是你想要的，那么只需在case "backdrop click" 中使用event.preventDefault(); 并返回以结束执行。

+1。这实际上是在不限制功能（背景和键盘触发器）的情况下防止模式关闭的更好方法。注意：事件是广播，所以必须在 uibModalInstance 范围或下游范围内监听。从 0.13 开始：a5a82d9

【参考方案4】：

这是文档中提到的内容

backdrop - 控制背景的存在。允许值：真 (默认), false (无背景), 'static' - 背景存在但 在模态窗口外单击时，模态窗口不会关闭。

static 可能有效。

【讨论】：

在模态窗口外单击时，是否有任何选项可以不显示背景并且关闭模态窗口？

【参考方案5】：

全局配置，

decorator， Angular 中最好的功能之一。能够“修补” 3rd 方模块。

假设您希望这种行为在所有$modal 引用中，并且您不想更改呼叫，

你可以写一个装饰器。这只是增加了选项 - backdrop:'static', keyboard:false

angular.module('ui.bootstrap').config(function ($provide) 
    $provide.decorator('$modal', function ($delegate) 
        var open = $delegate.open;

        $delegate.open = function (options) 
            options = angular.extend(options || , 
                backdrop: 'static',
                keyboard: false
            );

            return open(options);
        ;
        return $delegate;
    )
);

注意：在最新版本中，$modal 重命名为$uibModal

在线演示 - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview

【参考方案6】：

对于新版本的ngDialog（0.5.6），使用：

closeByEscape : false
closeByDocument : false