Estoy usando Angular UI $ modal en mi proyecto http://angular-ui.github.io/bootstrap/#/modal
No quiero que el usuario cierre el modal presionando el fondo. Quiero que un modal solo se pueda cerrar presionando el botón cerrar que he creado.
¿Cómo evito que modal se cierre?
angularjs
angular-ui
angularjs-service
Rahul Prasad
fuente
fuente
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 un duplicado de Angular UI Bootstrap Modal: cómo evitar la interacción del usuario
fuente
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.
fuente
event.preventDefault();
insidecase "backdrop click"
y vuelva para finalizar la ejecución.Esto es lo que se menciona en la documentación.
static
podría funcionar.fuente
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
$modal
referencias 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; }) });
$modal
nombre cambia a$uibModal
Demostración en línea: http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview
fuente
para la nueva versión de ngDialog (0.5.6), use:
closeByEscape : false closeByDocument : false
fuente