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

I am using Angular UI $modal in my project http://angular-ui.github.io/bootstrap/#/modal

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

I don't want user to close the modal by pressing on backdrop. I want a modal can only be closed by pressing close button which I have created.

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

How do I prevent modal from closing ?

如何防止模式关闭?

6 个解决方案

#1

While you creating your modal you can specify its behavior:

在创建模式时，可以指定其行为:

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

#2

backdrop : 'static'

Will work for 'click' events but still you can use "Esc" key to close the popup.

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

keyboard :false

to prevent popup close by "Esc" key.

通过“Esc”键防止弹出。

Thanks to pkozlowski.opensource for answer.

感谢pkozlowski。开源的答案。

I think question is duplicate of Angular UI Bootstrap Modal - how to prevent user interaction

我认为问题是角UI引导模式的重复——如何防止用户交互

#3

Old question, but if you want to add confirmation dialogs on various close actions, add this to your modal instance controller:

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

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

I have a close button on the top right of mine, which triggers the "cancel" action. Clicking on the backdrop (if enabled), triggers the cancel action. You can use that to use different messages for various close events.

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

#4

This is what is mentioned in documentation

这是文档中提到的

backdrop - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window.

背景-控制背景的存在。允许的值:true(默认)，false(无背景)，'static' -背景是存在的，但是模态窗口在模式窗口之外点击时没有关闭。

static may work.

静态的可能。

#5

for the new version of ngDialog (0.5.6), use:

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

closeByEscape : false
closeByDocument : false

#6

Configure globally,

decorator, one of the best features in angular. gives the ability to "patch" 3rd party modules.

装饰者，角度上最好的特征之一。提供“修补”第三方模块的能力。

Let's say you want this behavior in all of your $modal references and you don't want to change your calls,

假设你想在所有的$modal引用中使用这种行为你不想改变你的调用，

You can write a decorator. that simply adds to options - {backdrop:'static', keyboard:false}

您可以编写一个decorator。那只是添加到选项-{背景:'静态'，键盘: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;
    })
});

• Note: in the latest versions, the $modal renamed to $uibModal
• 注意:在最新版本中，将$modal改名为$uibModal

Online demo - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview

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