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.
9 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.