Ich verwende jqueryui für ein Dialogfeld. Wenn Sie das erste Mal auf den Link "Klicken Sie für einen Modal" klicken, klicken Sie auf OK. Wenn Sie die ESC Taste drücken, verschwindet das Dialogfeld. Aber die Klicks danach funktionieren nicht. Ich möchte, dass diese auch funktionieren. Aktualisieren der Seite macht alles in Ordnung.
HTML:
%Vor%jQuery-Ausschnitt:
%Vor%Wie kann ich mehrere Klicks funktionieren lassen?
Vier Dinge.
Wenn der Dialog wiederverwendbar sein soll, sollten Sie ihn zunächst vor beim ersten Klick erstellen und die Option autoOpen auf false setzen. Um den Dialog zu öffnen, sollten Sie dialog('open') verwenden.
Zum Beispiel:
%Vor% Beachten Sie, dass ich ein var dialog zum Speichern von $('#dialog') erstelle. Dies ist effizienter, weil jQuery ansonsten in einem Codecode nach #dialog suchen müsste.
Zweitens haben Sie einen Fehler in Ihrem HTML: Es gibt ein Zitat zu viele hier:
%Vor%Dies kann in einigen Browsern (aber nicht in allen) zu unerwartetem Verhalten führen, was das Debuggen erschwert. Entfernen Sie das zusätzliche Angebot.
Drittens, wenn ich mich richtig erinnere, behandelt jQuery UI Dialog bereits den Schlüssel ESC , so dass Sie das nicht selbst tun müssen. Wenn Sie etwas anderes tun möchten, als das Dialogfeld zu schließen, wenn Sie auf "Entsperren" klicken, sollten Sie die beforeClose Ereignis. Wenn Sie nur den Dialog schließen möchten; Du bist fertig. : -)
Und schließlich ist es eine gute Übung, keine Inline-Stile zu verwenden. Also statt dessen:
%Vor%Erstellen Sie eine CSS-Datei mit folgendem Inhalt:
%Vor% Sie können dasselbe für #dialog tun, einschließlich des Rahmens, den Sie jetzt mit JavaScript anwenden:
Hoffe, das hilft.
Hier ist ein Arbeitsbeispiel, das die vier genannten Punkte anwendet: Ссылка
Beachten Sie, dass die jQuery UI-Stile fehlen, daher ist der Dialog ein wenig hässlich. : -)
Um sicherzustellen, dass der Dialog wie erwartet funktioniert, vergewissern Sie sich, dass Sie die neuesten Versionen von jQuery und jQuery UI verwenden und ein jQuery UI Theme enthalten.
Hier ist ein Beispiel, in dem alles über Google CDN geladen wird:
%Vor% Fügen Sie diese in die <head> Ihres HTML ein. Das Ergebnis sollte so aussehen . Wenn nicht, können Sie ein paar Dinge ausprobieren:
file:// vs. via localhost ). Wenn keiner von denen funktioniert, tut es mir leid zu sagen, aber ... "du machst es falsch". :-P
Beachten Sie, dass das obige Snippet das standardmäßige jQuery UI-Theme mit dem Namen "base" enthält. Wenn es nicht Ihren Anforderungen entspricht, können Sie Google CDN für einige andere Standardthemen verwenden (siehe Blogpost ), oder Sie können Ihr eigenes Thema mit ThemeRoller erstellen.
Bearbeiten:
Um sicherzustellen, dass der Dialog den Fokus behält (und somit geschlossen wird, wenn der Benutzer ESC drückt, selbst wenn der Benutzer irgendwo anders auf der Seite geklickt hat), setzen Sie modal auf true:
jsFiddle: Ссылка
Normalerweise kann der Benutzer weiterhin mit anderen Elementen auf der Seite interagieren (und folglich können diese Elemente den Fokus außerhalb des Dialogs abrufen). Wenn die Option modal auf true gesetzt ist, kann der Benutzer nicht mehr mit dem Rest der Seite arbeiten und der Dialog behält den Fokus, egal was passiert.
Hoffe, das hilft.
versuche% $("#dialog").close(); anstelle von $("body").unbind("keyup.myDialog");
versuche mit $ (this) .dialog ("destroy"); anstelle von $ (this) .dialog ("close");
Tags und Links javascript jquery jquery-ui jquery-ui-dialog