Sweet Alert zur Bestätigung bei Öffnen eines Links

[Raffi]

Guten Tag,

kennt sich hier jemand mit Sweet Alert aus? Ich würde gerne vereinfacht formuliert, das öffnen eines Downloadlinks bestätigen lassen. Also man klickt auf den Link und ein Sweet Alert Fenster öffnet sich, das über die Urheberrechte informiert. Bei "OK" soll der Download starten, bei "Abbrechen" soll man einfach zur Seite zurückkehren. Eine einfache confirm() Box habe ich schon erstellt, sieht aber nicht so schön aus. Hätte gerne ein schönes Modal, das sich öffnet. Wäre euch sehr dankbar, wenn ihr vielleicht sogar einen Code angeben könnt.

[Der Martin]

Hallo,

kennt sich hier jemand mit Sweet Alert aus?

nein, noch nie gehört. Aber du hast es ja in etwa erklärt. Was daran "sweet" sein soll, verstehe ich aber nicht - für mich klingt es eher lästig.

Ich würde gerne vereinfacht formuliert, das öffnen eines Downloadlinks bestätigen lassen. Also man klickt auf den Link und ein Sweet Alert Fenster öffnet sich, das über die Urheberrechte informiert. Bei "OK" soll der Download starten, bei "Abbrechen" soll man einfach zur Seite zurückkehren.

Da wäre es doch IMO einfacher und für die Nutzer auch angenehmer, wenn diese Informationen "einfach so" direkt über oder unter dem Link stehen.

Eine einfache confirm() Box habe ich schon erstellt, sieht aber nicht so schön aus. Hätte gerne ein schönes Modal, das sich öffnet.

Und was machen Besucher ohne Javascript?

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Hätte gerne ein schönes Modal, das sich öffnet.

Und was machen Besucher ohne Javascript?

Und was machen Nutzer ohne Maus? Und was machen Screenreader-Nutzer?

Einen modalen Dialog sollte man nicht selbst bauen, wenn man nicht genau weiß, was da alles zu beachten ist. Da sollte man auf was Fertiges zurückgreifen:

• Accessible Modal Dialog von Scott O’Hara (The Paciello Group)

• A11y Dialog von Kitty Giraudel (Edenspiekermann)

Ich muss mir mal die Zeit nehmen und die beiden vergleichen.

LLAP 🖖

[Raffi]

Einen modalen Dialog sollte man nicht selbst bauen, wenn man nicht genau weiß, was da alles zu beachten ist. Da sollte man auf was Fertiges zurückgreifen:

"Sweet Alert" ist ja solch eine Möglichkeit, um sich so ein Benachrichtigungsfenster zu bauen. Nur habe ich es noch nicht hinbekommen, das Ganze im Zusammenhang mit Bestätigung und dem Öffnen des Links.

[Gunnar Bittersmann]

@@Raffi

Einen modalen Dialog sollte man nicht selbst bauen, wenn man nicht genau weiß, was da alles zu beachten ist. Da sollte man auf was Fertiges zurückgreifen:

"Sweet Alert" ist ja solch eine Möglichkeit, um sich so ein Benachrichtigungsfenster zu bauen.

Nein, eben nicht! Der Mist wurde gefrickelt von Leuten, die eben nicht wissen, was da alles zu beachten ist.

Man kann so ein Sweet-Alert-Fenster zwar per Tastatur wieder schließen, der Fokus (dasjenige interaktive Element, welches mit Enter bzw. Leertaste bedient wird) ist dann aber außerhalb der Seite.

Unbrauchbar.

LLAP 🖖

[marctrix]

Hej Der Martin,

kennt sich hier jemand mit Sweet Alert aus?

nein, noch nie gehört. Aber du hast es ja in etwa erklärt. Was daran "sweet" sein soll, verstehe ich aber nicht - für mich klingt es eher lästig.

Sehe ich genauso. Ein Häkchen „habe es verstanden“ sollte doch reichen?!

Marc

[Rolf B]

Hallo Raffi,

ich gehe mal davon aus, dass Sweet Alert und Konsorten das, was sie sein wollen, eben NICHT sind, nämlich modal. Ein echter modaler Dialog wie confirm() hält die JavaScript-Verarbeitung an und setzt die Ausführung erst fort, wenn der Anwender reagiert hat. Sowas kann man in einem click-Handler des Download-Links einsetzen und bei "OK" weitermachen, so dass erst dann der Download beginnt.

Die pseudomodalen Dialoge wie Sweet Alert blockieren lediglich den Rest der Webseite, sind aus Sicht der DOM Events aber nicht modal. D.h. der Klick auf den Link läuft weiter und der Download geht los, während der Sweet Alert noch rumsteht. Oder der Sweet Alert kommt gar nicht, weil der Browser soeben einen Link woandershin verarbeitet, das weiß ich gerade nicht. Ich würde aber das erstere mutmaßen.

D.h. wenn Du etwas wie Sweet Alert verwendest, wäre der naive Ansatz, das über einen Button auslösen, der zunächst einmal den Alert anzeigt, und erst nach Bestätigung würde man via JavaScript den Downloadlink aktivieren. Was aber wiederum nicht geht, weil dem Browser ein Download aus JavaScript heraus sehr unsympathisch ist.

Du müsstest es so machen: Setze ganz normal den Download-Link auf deine Seite. Der Klick darauf wird mit JS abgefangen und das Event gecancelled. Im JS öffnest Du einen pseudomodalen Bestätigungsdialog, und in dem befindet sich ein Cancel-Button und ein Duplikat des Downloadlinks, der den Dialog ausgelöst hat (den kannst Du an Hand des Eventdaten des click-Events konstruieren). Wenn Du magst, kannst Du diesen Link auch erst dann sichtbar machen, wenn der User sein "Ja, ich habe verstanden" angehakt hat. Der User kann dann den Link im Dialog klicken und der Download wird ausgelöst. Du registrierst Dich noch auf das click Event des neuen Links, um damit den Bestätigungsdialog zu schließen. Ob sowas mit Sweetalert möglich ist oder ob Du diesen Dialog selbst bauen musst, weiß ich nicht. Nach Gunnars Hinweisen würde ich sagen: such Dir ein besseres Tool für modale Dialoge.

Bei abgeschaltetem JS geht der Dialog nicht auf und der Download startet sofort. Ggf. kannst Du den Copyright-Text unter dem Link ins HTML einbauen und ihn bei aktivem JavaScript aus dem DOM entfernen oder ausblenden.

Einfachere Lösung könnte auch einfach eine Checkbox unter dem ganz normalen Downloadlink sein. Klickt man den Link und die Box hat keinen Haken, cancelled ein Click-Handler den Download. Oder andersrum: ohne Haken ist der Downloadlink versteckt oder disabled. Ob das alles ARIA-konform machbar ist - dafür gibt's hier andere Experten 😉

Rolf