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});

• Demo
• Download

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.