Javascript alert
Die Javascript-Funktion alert() ist sicher die am meisten genutze Funktion, um einem Benutzer eine Nachricht als text alert anzuzeigen. alert() ist sehr einfach zu benutzen und erfordert keine Javascriptbibliotheken für Layer, Popups, Windows oder ähnlicher.
Der Nachteil ist, alert() ist sehr unflexibel, man kann z.B. kein HTML übergeben und auch keinen Titel übergeben und die Messagebox sieht in jedem Browser bzw. unter jedem Betriebssystem etwas anders aus.
Ich habe eine schlanke Funktion geschrieben, welche die Method window.alert überschreibt aber keinerlei Änderung an vorhandenem Javascript Code erfordert.
Dazu muss man nur die Datei alert.js in eine bestehende HTML-Seite einbinden und schon steht ein flexibles alert() mit folgenden Funktionen zur Verfügung:
- optionale Angabe eines Titels
- HTML (auch Links) im Titel und Body möglich
- Aufruf wie gehabt mit alert(titel,message,{options})
- individuelles Styling über alert.css
- sehr kleiner Payload, 2.4 KB
Seit Version 2, kann als Parameter 2 oder 3 ein asoziatives Array mit den folgenden Werten übergeben werden:
button_title: 'ok', // -1: center left: -1, // -1: center top: -1, // -1: auto width: -1, // -1: auto height: -1
Alertbox mit Titel
alert( 'mein Titel', 'meine Nachricht' ); |
Alterbox mit HTML im Titel
alert( '<em>mein titel</em>', 'echt einfach' ); |
Alterbox ohne Titel
alert( 'meine Nachricht' ); |
Alterbox ohne Titel mit HTML im Body
alert( '<em>Hilfe gibt es</em> <a href="">hier</a>!' ); |
mehrzeilige Alterbox HTML im Titel und Body
alert( '<span style="color:red;">Achtung, es ist wichtig!</span>', 'Hilfe gibt es <a href="">hier</a>!<br />Unbedingt lesen!' ); |
mit Titel und geändertem Button-Text
alert('Achtung!', 'Alertbox mit Titel und geändertem Button-Text!', {button_title:'Super!'}); |
mit absoluter Position, Höhe und Breite (left:30, top:20, width:500, height:200)
alert('Achtung!', 'Alertbox mit bel. Position', {left:30, top:20, width:500, height:200}); |
Die Funktionen confirm und prompt hätte ich auch gerne gleich mit angepasst, aber leider habe ich keinen Weg gefunden, den Browser so blockieren, dass für die Antwort kein extra Handler nötig wäre. Die Lösung hätte also Änderungen an vorhandenen Aufrufen von confirm und promt erfordert und das wollte ich vermeiden.
17 Kommentare zu Javascript alert
Thomas Müller
10. Januar 2010 um 16:58:03
Hallo,
eine wirklich sehr nützliche Technik. Wenn man von den Anfragen diesbezüglich in den diversen Foren ausgeht, ist dies eigentlich ein Werkzeug, nach dem die Entwickler sich die Finger lecken. Zumindest mir geht es so.
Ich bin sogar noch einen Schritt weiter gegangen und lasse es zu, dass das rufende Programm die Koordinaten
von Top/Left der Box übergibt, damit das blöde Alert-Fenster sich nicht immer dick und fett über meine Anwendung setzt.
Auf jeden Fall, herzlichen Dank für Deine Arbeit.
naden
11. Januar 2010 um 10:25:16
@Thomas, danke für dein Feedback. Wenn du möchtest, kannst du mir deine Erweiterung per E-Mail (Adresse siehe oben rechts in den Sidebar) senden, dann baue ich die mit ein.
Dieter Hildebrandt
14. Januar 2010 um 07:21:41
Hallo,
Dein Beitrag kam sehr gelegen.
Ich suche in der Tat, dass was oben beschrieben ist.
Gern würde ich auch die Erweiterung mit der Koordinaten-Übergabe nutzen. Wird das hier veröffentlicht?
Liebe Grüße
Dieter
naden
14. Januar 2010 um 11:42:42
@dieter, von Thomas kam noch keine Feedback. Sobald er was sendet, baue ich das ein. Wo nutzt du das?
Nope
28. Januar 2010 um 18:10:15
Hallo lieber Erfinder ^^,
also finde diese Alertbox auch sehr gut. Nur habe eine Frage. Habe hier ein javascript.alert Fenster vor mir. Bei dir kann man den Text den dieses Alert anzeigt makieren und kopieren. Aber nicht bei dem mir vorliegenden Script. Wie kann ich das beheben oder was habe ich imscript falsch?
LG
naden
28. Januar 2010 um 18:30:11
@Nope, benutzt du mein Script? Wenn ja, dann poste doch mal bitte einen Link, wo man sehen kann wie du es eingebaut hast.
Beim “normalen” alert(); kann man den Text nicht markieren.
neogoki
03. Februar 2010 um 11:08:33
Hi,
geniale Funktion, ich habe nur eine frage:
wie kann ich die Position und größe des Alerts festlegen/manipulieren?
ich hab alles ausprobiert was ich kenne, hab aber nur verhunztes rausbekommen
c0de
18. Februar 2010 um 21:18:18
Auch wenn ich die benutzung der Dinger als echt “uncool” und unmodern bezeichnen würde, danke ich dir für die Info das man die Boxen so beeinflussen kann!
naden
20. Februar 2010 um 17:54:13
Jap, aber der payload ist so klein, dass es sich oft lohnt das zu nutzen. Es seit denn, du hast eh schon jQuery etc. in deiner App.
oliver
06. April 2010 um 23:40:56
Hallo,
Im IE 6 wird scheinbar kein Titel aktzeptiert in der Alert Box
gruss
Oliver
Gerald
17. Juni 2010 um 07:48:48
Was die Variabilität und Einfachheit der Benutzung betrifft, ist das eine wirklich prima Funktion! Ein Nachteil im Vergleich zum originalen alert() ist jedoch, dass dieses popup nicht modal ist, das heißt, es ist möglich, auf weitere Links in der darunter liegenden Seite zu klicken, ohne auf die alertBox zu reagieren. Das sollte meines Erachtens nicht so sein.
naden
17. Juni 2010 um 11:03:48
@Geral, dass stimmt. Man könnte die Funktion um einen Layer erweitern, der sich zwischen die Seite und das Popup legt und diese somit “unklickbar” macht. Mal sehen ob ich das bei Gelegenheit mal umsetze.
KaleR
05. Juli 2010 um 14:30:09
Hallo echt klasse script
nur eine funktion vermisse ich.
Beim standard alert wird man auf die seite gebannt, das heißt man kann die aktuelle seite weder verändern noch schließen
ist das möglich, dass du diese funktion als option einbauen kannst?
MfG KaleR
naden
06. Juli 2010 um 21:47:45
Das gleiche hatte Gerald schon angemerkt, siehe meine Antwort dazu.
KaleR
07. Juli 2010 um 15:51:17
ja ich weiß
aber gerald hat geschreiben, dass es ihn stört das man auf die links unterhalb des alerts klicken kann was mich stört ist, das man die registrierkarten wechseln kann, was man beim normalen alert ja nicht kann
naden
07. Juli 2010 um 20:53:33
Ich muß dir leider sagen, dass es dafür keine Lösung gibt. Dass man aus dem Context der Webseite auf die Tabs des Browsers nicht zugreifen kann. Das ist auch sinnvoll, da es ein erhebliches Sicherheitsrisiko darstellen würde, wenn jede Webseite mit den Tabs Schindluder treiben könnte.
naden
18. August 2010 um 10:47:59
Ich habe es mit dem IE6 des IE-Testers probiert, es funktioniert fehlerfrei. Was nicht bedeuten muß, dass es in jedem IE6 funktioniert :)