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

Question

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

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

如何防止模态关闭？

Answer 1

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

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

Answer 2

backdrop : 'static'

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

keyboard :false

以防止通过“Esc”键关闭弹出窗口。

感谢 pkozlowski.opensource 的回答。

我认为问题是Angular UI Bootstrap Modal 的重复——如何防止用户交互

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

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

Answer 4

这是文档中提到的

背景 - 控制背景的存在。 允许值：true（默认）、false（无背景）、'static' - 背景存在但在模态窗口外单击时不关闭模态窗口。

static可能有效。

Answer 5

全局配置，

装饰器，角度中最好的功能之一。 提供“修补”第 3 方模块的能力。

假设您希望在所有$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

Answer 6

对于 ngDialog (0.5.6) 的新版本，请使用：

closeByEscape : false
closeByDocument : false