Como evito que o modal angular-ui feche?


Respostas:


193

Ao criar seu modal, você pode especificar seu comportamento:

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

2
Sim, esta é a resposta correta :) Obrigado por compartilhar!
skywalker

Legal! Obrigado por compartilhar. +1
Khanh Tran

10
Existe alguma maneira de defini-los dinamicamente - digamos, se o pop-up estiver no meio de uma operação que não deve ser interrompida?
RonLugge


22

Pergunta antiga, mas se você quiser adicionar caixas de diálogo de confirmação em várias ações de fechamento, adicione isso ao seu controlador de instância modal:

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

Eu tenho um botão Fechar no canto superior direito do meu, que aciona a ação "cancelar". Clicar na tela de fundo (se ativado), aciona a ação de cancelamento. Você pode usar isso para usar mensagens diferentes para vários eventos de fechamento.


Como isso responde à minha pergunta?
Rahul Prasad de

Com isso, você pode interceptar se um modal foi instruído a fechar, pelo motivo da instrução. Com base nisso, você adiciona uma lógica personalizada, se desejar, ou talvez solicite ao usuário uma confirmação antes de realmente fechar o modal.
Tiago

Conforme a pergunta declarada, diga-me uma lógica, que impedirá o modal de fechar?
Rahul Prasad de

Se isso é tudo que você quer, é só usar event.preventDefault();dentro case "backdrop click"e voltar para finalizar a execução.
Tiago

4
+1. Na verdade, esta é uma maneira muito melhor de evitar que o modal feche sem limitar os recursos (tela de fundo e gatilhos do teclado). Observação: o evento é transmitido, portanto, deve ser ouvido no escopo uibModalInstance ou nos escopos downstream. A partir de 0,13: a5a82d9
Sergej Popov

13

Isso é o que é mencionado na documentação

pano de fundo - controla a presença de um pano de fundo. Valores permitidos: verdadeiro (padrão), falso (sem pano de fundo), 'estático' - o pano de fundo está presente, mas a janela modal não é fechada ao clicar fora da janela modal.

static pode funcionar.


Existe alguma opção para que nenhum pano de fundo seja exibido e a janela modal seja fechada ao clicar fora da janela modal?

8

Configure globalmente,

decorador , uma das melhores características do angular. oferece a capacidade de "corrigir" módulos de terceiros.

Digamos que você queira esse comportamento em todas as suas $modalreferências e não queira alterar suas chamadas,

Você pode escrever um decorador . que simplesmente adiciona opções -{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;
    })
});
  • Nota: nas versões mais recentes, o $modalrenomeado para$uibModal

Demonstração online - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview


5

para a nova versão do ngDialog (0.5.6), use:

closeByEscape : false
closeByDocument : false
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.