Pregunta ¿Cómo evito que el modo angular ui se cierre?


Estoy usando Angular UI $ modal en mi proyecto http://angular-ui.github.io/bootstrap/#/modal 

No quiero que el usuario cierre el modal presionando telón de fondo. Quiero que un modal solo se cierre presionando el botón de cerrar que he creado.

¿Cómo evito que cierre modal?


73
2017-11-29 12:59


origen


Respuestas:


Mientras crea su modal, puede especificar su comportamiento:

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

165
2017-11-29 13:29



backdrop : 'static'

Funcionará para eventos de "clic" pero aún puede usar la tecla "Esc" para cerrar la ventana emergente.

keyboard :false

para evitar que la ventana emergente se cierre con la tecla "Esc".

Gracias a pkozlowski.opensource por la respuesta.

Creo que la pregunta es duplicada de Angular UI Bootstrap Modal: cómo evitar la interacción del usuario


28
2018-05-26 10:20



Pregunta anterior, pero si desea agregar cuadros de diálogo de confirmación en varias acciones cercanas, agregue esto a su controlador de instancia 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();
    }
});

Tengo un botón de cierre en la parte superior derecha de la mía, que desencadena la acción "cancelar". Al hacer clic en el fondo (si está habilitado), se activa la acción de cancelar. Puede usar eso para usar diferentes mensajes para varios eventos cercanos.


17
2018-03-16 11:45



Esto es lo que se menciona en la documentación

telón de fondo: controla la presencia de un fondo. Valores permitidos: verdadero   (predeterminado), falso (sin fondo), 'estático' - el fondo está presente pero   la ventana modal no se cierra al hacer clic fuera de la ventana modal.

static podría funcionar.


12
2017-11-29 13:11



Configurar globalmente,

decorador, una de las mejores características en angular. da la capacidad de "parche" Módulos de terceros.

Digamos que quieres este comportamiento en todos tus $modal referencias y no quieres cambiar tus llamadas,

Puedes escribir un decorador. eso simplemente agrega opciones - {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: en las últimas versiones, el $modal renombrado a $uibModal

Demostración en línea - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview


6
2017-08-15 14:46



para la nueva versión de ngDialog (0.5.6), use:

closeByEscape : false
closeByDocument : false

5
2018-02-01 09:07