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

Question

我在我的项目中使用Angular UI $modal。 http://angular-ui.github.io/bootstrap/#/modal 我不希望用户通过点击背景来关闭模态框。我希望模态框只能通过我创建的关闭按钮来关闭。

如何防止模态框关闭？

- Rahul Prasad

Answer 1

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

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

- artur grzesiak

---

有没有什么办法可以动态设置这些参数 - 如果弹出窗口正在执行不应中断的操作呢？ - RonLugge

Answer 2

backdrop : 'static'

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

keyboard :false

为了防止弹出窗口被"Esc"键关闭。

感谢pkozlowski.opensource的回答。

我认为这个问题是重复的，可以参考以下链接： Angular UI Bootstrap Modal - how to prevent user interaction

- Sachin G.

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

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

- Tiago

---

它如何回答我的问题？ - Rahul Prasad

通过这个功能，您可以拦截模态框被指示关闭的原因。基于此，您可以添加自定义逻辑（如果需要），或在实际关闭模态框之前提示用户进行确认。 - Tiago

正如问题所述，告诉我一个逻辑，可以防止模态框关闭？ - Rahul Prasad

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

这实际上是一种更好的方法，可以防止模态框关闭而不限制功能（背景和键盘触发器）。注意：事件会被“广播”，因此必须在uibModalInstance范围或下游范围上进行侦听。从0.13版本开始：a5a82d9 - Sergej Popov

Answer 4

文档中提到了以下内容

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

static 可能有效。

- Chandermani

---

有没有选项可以让模态窗口在点击窗口外部时关闭，而不显示任何背景？ - user3728375

Answer 5

全局配置

装饰器是Angular中最好的功能之一，它可以“修补”第三方模块。

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

- Jossef Harush Kadouri

Answer 6

对于新版本的ngDialog（0.5.6），请使用以下代码：

closeByEscape : false
closeByDocument : false

- Ben Cohen