Benutzerdefinierter Dialog mit JavaScript bestätigen

8

Ich möchte eine JavaScript-Funktion ähnlich wie confirm() erstellen, die einen Dialog (ein div mit einer Frage und 2 Schaltflächen) anzeigt und true zurückgibt, wenn der Benutzer sonst auf "Ok" oder false klickt.

Ist das möglich mit JavaScript / jQuery aber ohne Plugins (z. B. jQuery UI oder Dialog)? Weil ich versuche, Größe und Umlaufzeiten zu reduzieren ...

Ich habe versucht, diesen Code zu schreiben, aber ich weiß nicht, wie ich die Funktion "warte" für den Benutzer klicken soll.

Ich möchte meine Funktion auf diese Weise nutzen:

%Vor%

Auf diese Weise könnte ich die gleiche Funktion in mehreren Kontexten verwenden, indem ich einfach die als Parameter übergebene Frage ändere. Dies ist das gleiche Verhalten von confirm ()

    
supergiox 30.05.2012, 22:10
quelle

3 Antworten

13

Anstatt auf die Eingabe des Benutzers zu warten und dann von der Funktion zurückzukommen, ist es in JavaScript üblich, eine Rückruffunktion bereitzustellen, die aufgerufen wird, wenn die Aktion, auf die Sie warten, abgeschlossen ist. Zum Beispiel:

%Vor%

Dies könnte wie folgt implementiert werden:

%Vor%     
georgebrock 30.05.2012 22:17
quelle
2

Wenn Sie jQuery verwenden, warum implementieren Sie jQueryUI nicht? Und verwenden Sie die Dialog -Funktion wie folgt:

  

als 2 Teil:

HTML

%Vor%

Skript

%Vor%
  

Alles im Skript:

%Vor%

jsFiddle

    
SpYk3HH 30.05.2012 22:24
quelle
1

Dies sollte wirklich mit einem Rückruf gemacht werden. Am nächsten kommt es, wenn Sie ein Veröffentlichungs- und Abonnementmodell mit benutzerdefinierten Ereignissen verwenden.

Um dies zu tun:

Wenn ein Benutzer auf die Schaltfläche "Ja" klickt, lösen Sie ein benutzerdefiniertes Ereignis namens clickedYes aus. Tun Sie dasselbe für "nein"

%Vor%

Nun müssen wir diese Ereignisse "abhören" oder abonnieren und die entsprechende Aktion im Kontext ausführen.

Erstellen Sie eine hypothetische Situation : Ihr Benutzer klickt auf Löschen und Sie möchten diese Auswahl bestätigen.

Stellen Sie zuerst ein, was Sie tun möchten, wenn Sie auf Ja klicken:

%Vor%

dann, was Sie wollen, wenn sie auf Nein klicken:

%Vor%

Wir haben also Aktionen eingerichtet, die auf "clickedYes" oder "no" warten. Jetzt müssen wir dem Benutzer lediglich das Popup zeigen, damit er auf "Ja" oder "Nein" klicken muss. Wenn sie dies tun, werden sie die oben genannten Ereignisse auslösen.

, damit Ihre myConfirm () - Funktion nur Folgendes tun kann:

%Vor%

Also wäre die Reihenfolge:

  1. Binden Sie Trigger für die benutzerdefinierten Ereignisse an die Ja- und Nein-Schaltflächen
  2. Vor der Aufforderung - alte Aktionen lösen und neue hinzufügen
  3. Präsentieren Sie dem Benutzer ein Popup, das dazu führt, dass Sie eine Ihrer Aktionen auslösen.

Damit können Sie die Funktion wie folgt aufrufen myConfirm ('Sind Sie sicher'); Es ist nicht genau das, wonach du suchst ... aber ich glaube nicht, dass es genau das ist, was du willst.

    
Brad Barrow 30.05.2012 22:29
quelle