Sweet Alert zur Bestätigung bei Öffnen eines Links

[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