¿Cómo evito que se cierre angular-ui modal?


Respuestas:


193

Mientras crea su modal, puede especificar su comportamiento:

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

2
Sí, esta es la respuesta correcta :) ¡Gracias por compartirlo!
skywalker

¡Frio! Gracias por compartir. +1
Khanh Tran

10
¿Hay alguna forma de configurarlos dinámicamente, por ejemplo, si la ventana emergente está en medio de una operación que no debería interrumpirse?
RonLugge


23

Pregunta anterior, pero si desea agregar cuadros de diálogo de confirmación en varias acciones de cierre, 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 del mío, que activa la acción "cancelar". Al hacer clic en el fondo (si está habilitado), se activa la acción de cancelación. Puede usar eso para usar diferentes mensajes para varios eventos cercanos.


¿Cómo responde mi pregunta?
Rahul Prasad

Con esto puede interceptar si un modal ha sido instruido para cerrar, por el motivo de la instrucción. En base a eso, agrega lógica personalizada si lo desea, o tal vez solicite al usuario una confirmación antes de cerrar el modal.
Tiago

Como se indicó en la pregunta, Dime una lógica, ¿qué evitará que modal se cierre?
Rahul Prasad

Si eso es todo lo que desea, utilice event.preventDefault();inside case "backdrop click"y vuelva para finalizar la ejecución.
Tiago

5
+1. En realidad, esta es una manera mucho mejor de evitar que modal se cierre sin limitar las funciones (disparadores de fondo y teclado). Nota: el evento se transmite, por lo que debe escucharse en el alcance uibModalInstance o en los ámbitos posteriores. A partir de 0.13: a5a82d9
Sergej Popov

13

Esto es lo que se menciona en la documentación.

telón de fondo: controla la presencia de un telón de 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.


¿Hay alguna opción para que no se muestre ningún fondo y la ventana modal se cierre al hacer clic fuera de la ventana modal?

8

Configurar globalmente,

decorador , una de las mejores prestaciones en angular. ofrece la posibilidad de "parchear" módulos de terceros.

Digamos que quiere este comportamiento en todas sus $modalreferencias y no quiere cambiar sus llamadas,

Puedes escribir un decorador . que simplemente se suma a las 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 $modalnombre cambia a$uibModal

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


5

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

closeByEscape : false
closeByDocument : false
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.