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
});
Artur Grzesiak
fonte
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
35
backdrop : 'static'

Funcionará para eventos de 'clique', mas ainda assim você pode usar a tecla "Esc" para fechar o pop-up.

keyboard :false

para evitar que o pop-up feche com a tecla "Esc".

Agradecimentos a pkozlowski.opensource pela resposta.

Eu acho que a pergunta é duplicata do Angular UI Bootstrap Modal - como evitar a interação do usuário

Sachin G.
fonte
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.

Tiago
fonte
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.

Chandermani
fonte
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

Jossef Harush
fonte
5

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

closeByEscape : false
closeByDocument : false
Ben Cohen
fonte