Wie verhindere ich, dass sich Angular-UI-Modal schließt?

86

Ich verwende Angular UI $ modal in meinem Projekt http://angular-ui.github.io/bootstrap/#/modal

Ich möchte nicht, dass der Benutzer das Modal durch Drücken auf den Hintergrund schließt. Ich möchte, dass ein Modal nur durch Drücken der von mir erstellten Schaltfläche zum Schließen geschlossen werden kann.

Wie verhindere ich das Schließen von Modal?

Rahul Prasad
quelle

Antworten:

193

Während Sie Ihr Modal erstellen, können Sie dessen Verhalten angeben:

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});
artur grzesiak
quelle
2
Ja, das ist die richtige Antwort :) Danke, dass du sie geteilt hast!
Skywalker
Cool! Danke für das Teilen. +1
Khanh Tran
10
Gibt es eine Möglichkeit, diese dynamisch festzulegen - beispielsweise, wenn sich das Popup mitten in einem Vorgang befindet, der nicht unterbrochen werden sollte?
RonLugge
35
backdrop : 'static'

Funktioniert für "Klick" -Ereignisse, aber Sie können das Popup trotzdem mit der Esc-Taste schließen.

keyboard :false

um ein Popup zu verhindern, das durch die Taste "Esc" geschlossen wird.

Vielen Dank an pkozlowski.opensource für die Antwort.

Ich denke, die Frage ist ein Duplikat von Angular UI Bootstrap Modal - wie man Benutzerinteraktion verhindert

Sachin G.
quelle
22

Alte Frage, aber wenn Sie Bestätigungsdialoge zu verschiedenen Schließaktionen hinzufügen möchten, fügen Sie diese Ihrem modalen Instanzcontroller hinzu:

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

Ich habe oben rechts eine Schaltfläche zum Schließen, die die Aktion "Abbrechen" auslöst. Durch Klicken auf den Hintergrund (falls aktiviert) wird die Abbruchaktion ausgelöst. Sie können dies verwenden, um verschiedene Nachrichten für verschiedene Abschlussereignisse zu verwenden.

Tiago
quelle
Wie beantwortet es meine Frage?
Rahul Prasad
Mit dieser Option können Sie abfangen, ob ein Modal durch den Grund für die Anweisung zum Schließen angewiesen wurde. Auf dieser Grundlage fügen Sie bei Bedarf eine benutzerdefinierte Logik hinzu oder fordern den Benutzer zur Bestätigung auf, bevor Sie das Modal tatsächlich schließen.
Tiago
Wie gesagt, sagen Sie mir eine Logik, die verhindert, dass Modal geschlossen wird?
Rahul Prasad
Wenn das alles ist, was Sie wollen, verwenden Sie einfach event.preventDefault();inside case "backdrop click"und kehren Sie zurück, um die Ausführung zu beenden.
Tiago
4
+1. Dies ist tatsächlich ein viel besserer Weg, um zu verhindern, dass Modal geschlossen wird, ohne die Funktionen einzuschränken (Hintergrund- und Tastaturauslöser). Hinweis: Das Ereignis wird gesendet und muss daher im Bereich uibModalInstance oder in nachgelagerten Bereichen abgehört werden. Stand 0.13
Sergej Popov
13

Dies wird in der Dokumentation erwähnt

Hintergrund - Steuert das Vorhandensein eines Hintergrunds. Zulässige Werte: true (Standard), false (kein Hintergrund), 'static' - Hintergrund ist vorhanden, aber das modale Fenster wird nicht geschlossen, wenn Sie außerhalb des modalen Fensters klicken.

static könnte funktionieren.

Chandermani
quelle
Gibt es eine Option, damit kein Hintergrund angezeigt wird und das Modalfenster geschlossen wird, wenn Sie außerhalb des Modalfensters klicken?
8

Global konfigurieren,

Dekorateur , eine der besten Eigenschaften in eckigen. bietet die Möglichkeit,Module von Drittanbieternzu "patchen" .

Angenommen, Sie möchten dieses Verhalten in all Ihren $modalReferenzen und Ihre Anrufe nicht ändern.

Sie können einen Dekorateur schreiben . das fügt einfach Optionen hinzu -{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;
    })
});
  • Hinweis: In den neuesten Versionen wurde die $modalumbenannt in$uibModal

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

Jossef Harush
quelle
5

Verwenden Sie für die neue Version von ngDialog (0.5.6):

closeByEscape : false
closeByDocument : false
Ben Cohen
quelle