Jak zapobiec zamykaniu modalu angular-ui?


Odpowiedzi:


193

Podczas tworzenia modalu możesz określić jego zachowanie:

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

2
Tak, to jest prawidłowa odpowiedź :) Dziękuję za udostępnienie!
skywalker

Fajne! Dzięki za udostępnienie. +1
Khanh Tran

10
Czy istnieje sposób, aby ustawić je dynamicznie - powiedzmy, czy wyskakujące okienko jest w trakcie operacji, której nie należy przerywać?
RonLugge


22

Stare pytanie, ale jeśli chcesz dodać okna dialogowe potwierdzające przy różnych akcjach zamknięcia, dodaj to do kontrolera instancji modalnej:

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

Mam przycisk zamykania w prawym górnym rogu, który uruchamia akcję „anuluj”. Kliknięcie tła (jeśli jest włączone), wyzwala akcję anulowania. Możesz użyć tego, aby użyć różnych wiadomości dla różnych zamkniętych wydarzeń.


Jak to odpowiada na moje pytanie?
Rahul Prasad

Dzięki temu możesz przechwycić, jeśli modal został poinstruowany, aby zamknąć, z powodu instrukcji. Na tej podstawie możesz dodać niestandardową logikę, jeśli chcesz, lub być może poprosić użytkownika o potwierdzenie przed faktycznym zamknięciem modalu.
Tiago

Jak stwierdzono w pytaniu, powiedz mi logikę, która zapobiegnie zamknięciu modalu?
Rahul Prasad

Jeśli to wszystko, czego chcesz, po prostu użyj event.preventDefault();wewnątrz case "backdrop click"i wróć, aby zakończyć wykonywanie.
Tiago

4
+1. W rzeczywistości jest to o wiele lepszy sposób zapobiegania zamykaniu modalu bez ograniczania funkcji (wyzwalacze tła i klawiatury). Uwaga: zdarzenie jest transmitowane, więc musi być nasłuchiwane w zakresie uibModalInstance lub w zakresach podrzędnych. Od 0.13: a5a82d9
Sergej Popov

13

O tym jest mowa w dokumentacji

tło - kontroluje obecność tła. Dozwolone wartości: true (domyślnie), false (bez tła), „static” - tło jest obecne, ale okno modalne nie jest zamykane po kliknięciu poza oknem modalnym.

static może zadziałać.


Czy jest jakaś opcja, aby żadne tło nie było wyświetlane, a okno modalne zamykało się po kliknięciu poza oknem modalnym?

8

Skonfiguruj globalnie,

dekorator , jedna z najlepszych funkcji w kątowym. daje możliwość „łatania” modułów firm trzecich.

Powiedzmy, że chcesz to zachowanie we wszystkich swoich $modalodniesieniach i nie chcesz zmieniać połączeń,

Możesz napisać dekoratora . to po prostu dodaje do opcji -{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;
    })
});
  • Uwaga: w najnowszych wersjach $modalzmieniono nazwę na$uibModal

Demo online - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview


5

dla nowej wersji ngDialog (0.5.6) użyj:

closeByEscape : false
closeByDocument : false
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.