RSS Feed

Javascript alert

07.05.2009 by naden

Die -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',
// wird nach dem Klick auf den OK-Button aufgerufen
callback: function(){},
// -1: center
left: -1,
// -1: center
top: -1,
// -1: auto
width: -1,
// -1: auto
height: -1,
modal: true

Alertbox mit Titel

1
alert( 'mein Titel', 'meine Nachricht' );

Alterbox mit HTML im Titel

1
alert( '<em>mein titel</em>', 'echt einfach' );

Alterbox ohne Titel

1
alert( 'meine Nachricht' );

Alterbox ohne Titel mit HTML im Body

1
alert( '<em>Hilfe gibt es</em> <a href="">hier</a>!' );

mehrzeilige Alterbox HTML im Titel und Body

1
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

1
alert('Achtung!', 'Alertbox mit Titel und ge&auml;ndertem Button-Text!', {button_title:'Super!'});

mit absoluter Position, Höhe und Breite (left:30, top:20, width:500, height:200

1
alert('Achtung!', 'Alertbox mit bel. Position', {left:30, top:20, width:500, height:200});

Alterbox mit Callback

1
alert('Callback on OK!', {callback:function(){document.body.style.color='#ff0000';}});

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.

Getestet unter
Google Chrome 12
Opera 11.50
Firefox 2, 3, 4, 5, 8
Internet Explorer 5.5, 6, 7, 8 beta 2

Update auf v2.4

  1. OnClick Callback-Funktion hinzugefügt.

Update auf v2.3

  1. Problem mit der Positionierung bei Angabe von Höhe und Breite beseitigt. Siehe Kommentar

Update auf v2.2

  1. Die Alert-Box erscheint nun per default als modales Fenster. Über den neuen Paramater modal kann man dieses Verhalten wieder abschalten.
  2. Funktioniert nun auch in Firefox 5.

Teile diesen Beitrag

Folge mir

TwitterGoogle+XingFacebookRSS-Feed

Ähnliche Beiträge


62 Kommentare »

  1. Thomas Müller sagt:

    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.

  2. naden sagt:

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

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

  4. naden sagt:

    @dieter, von Thomas kam noch keine Feedback. Sobald er was sendet, baue ich das ein. Wo nutzt du das?

  5. Nope sagt:

    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

  6. naden sagt:

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

  7. neogoki sagt:

    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

  8. c0de sagt:

    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!

  9. naden sagt:

    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.

  10. oliver sagt:

    Hallo,

    Im IE 6 wird scheinbar kein Titel aktzeptiert in der Alert Box

    gruss
    Oliver

  11. Gerald sagt:

    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.

  12. naden sagt:

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

  13. KaleR sagt:

    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

  14. naden sagt:

    Das gleiche hatte Gerald schon angemerkt, siehe meine Antwort dazu.

  15. KaleR sagt:

    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

  16. naden sagt:

    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.

  17. naden sagt:

    Ich habe es mit dem IE6 des IE-Testers probiert, es funktioniert fehlerfrei. Was nicht bedeuten muß, dass es in jedem IE6 funktioniert :)

  18. Erp sagt:

    Hallo,

    ich habe ein Problem, dass mit der hier dargestellten (sehr guten!!) Idee allerdings nichts zu tun hat. Ihr scheint mir aber sehr kompetent zu sein, was Javascript angeht.
    Ich habe das Problem, dass der Text eines (normales) alert-Fensters erst dann sichtbar wird, wenn ich mit der Maus über das Fenster fahre (als würde ich damit ein Mouseover-Event auslösen).
    Dieser Fehler ist jedoch leider weder reproduzierbar, noch tritt er ständig auf.
    Ist der Fehler bekannt und kann man etwas dagegen machen?

    Vielen Dank, Erp

  19. naden sagt:

    Hört sich nach einem schwerwiegendem Systemfehler an. Ich kann mir nicht vorstellen, dass du dieses Verhalten auf einem anderen Rechner reproduzieren kannst.

  20. Erp sagt:

    Erstmal Danke für die schnelle Antwort.
    Ich habe dieses Phänomen sowohl in meiner Entwicklungsumgebung, als auch auf dem Server im Internet beobachten können.
    Jedenfalls hatte ich die Hoffnung, dass hier jemand schon einmal ähnliches beobachtet hat oder zumindestens eine Idee hat, wie man dieses Problem beheben kann.

    Grüße, Erp

  21. naden sagt:

    Ich meinte, dass es wahrscheinlich an deinem Client-Rechner liegt.

  22. Erp sagt:

    Entschuldige, dann habe ich dich missverstanden. Ich habe oben erwähntes Phänomen auch von einem Nutzer meiner Seite gemeldet bekommen.

  23. Gerd sagt:

    Hallo naden,

    erst Mal Respekt….Hochachtung…und vielen Dank für dieses tolle Skript.

    Eine Frage hierzu:
    Bei dir läuft ja alles über “Buttons”…sprich, wenn man auf diese klickt, erscheint die aleart-Box.

    Geht es und wenn ja wie, dass es über einen Link …sprich “a href” geht??

    Viele grüße
    Gerd

  24. naden sagt:

    Sicher, du kannst ja das Onclick-Event selber handeln. Nicht vergessen: Der Handler muss false zurückliefern, sonst versucht der Browser auf den angeklickten Link zu navigieren und die Seite wird neu geladen.

  25. Gerd sagt:

    Hi naden….wow, danke für die superschnelle Antwort

    öhhmmm könntest du mir ein Beispiellink zeigen?
    Wäre super nett von dir!!

  26. naden sagt:

    :) War gerade im Backend unterwegs. Guck mal auf der Demoseite #8 an.

  27. [...] ich habe etwas passendes dazu beim Naden gesehen . Er hat ein kleines Script geschrieben, was es erlaubt den Style der Alert-Box nach dem [...]

  28. kurt sagt:

    Prima script, danke!
    Wie kann ich ein alert-Fenster in der Breite begrenzen und trotzdem mittig im Browserfenster aufpoppen lassen?

    Mit “alert(‘titel’, ‘blabla’,{width:400});” klebt das Fenster am “Rand” meiner Anwendung.

  29. naden sagt:

    Lade dir die neue Version runter, ich habe diese Funktion nun eingebaut.

  30. Flo sagt:

    Kann das Plugin leider nicht verwenden, weil andere nachfolgende Scriptanweisungen wie “window.location” einfach sofort ausgeführt werden, statt auf das “ok” zu warten. sonst ist das wirklich eine Coole Idee.

    Funktioniert das in allen Browsern?

  31. naden sagt:

    Ja, dass Script kann den Ablauf nicht blockieren. Man könnte einen onClick-Handler einbauen, der nach dem OK-Klick ausgeführt wird. Allerdings würde sich das Script dann nicht mehr nahtlos einfügen und man müsste alles was nur nach dem ON-Klick ausgeführt wird in eine Funktion schieben.

  32. Tom sagt:

    Firefox 4+ hat a schon eine recht angenehme JS-Box, aber die lieben Kollegen nutzen ja lieber den IE. Also werde ich es ihnen auch mal etwas hübscher machen. Danke für die vielen Möglichkeiten.
    Ich habs noch nicht getestet, aber funktioniert das ganze auch mir “confirm” anstatt “alert”? Das wäre noch schön, für meine “Wollen sie wirklich..” Boxen. :)

  33. Kev sagt:

    Zu dem Problem mit dem “durchklicken”.
    Wie wäre es denn mit einem Element das über die komplette Seite geht und sich sozusagen über den Rest legt ?
    Da gibts doch auch etliche Seiten die einen auffordern erst auf den “Gefällt mir”-Button zu drücken bevor man die Seite besuchen kann.
    Da ist das nämlich auf die selbe Art und Weise gelöst. ( Anmerkung : Umgehen kann man diesen Schmarn indem man das Element [ das Overlay ] einfach löscht. ) In diesem Fall hier wäre es ja allerdings hilfreich und man braucht es natürlich nicht manuell zu entfernen. ;)

    MfG,
    Kev

  34. naden sagt:

    Ich habe hier eine Entwicklerversion rumliegen, wo ich genau das gemacht habe ;) Ich muss mal eine ruhige Stunde finden und das releasen. Wenn das nicht bald passiert, einfach nochmal nachhaken.

  35. Simsso sagt:

    Also bei mir funktioniert das mit Firefox 5.0 nicht…
    Woran liegts?

  36. naden sagt:

    Was gibt dir der Browser denn in der Fehlerkonsole aus?

  37. Christian sagt:

    Hi!

    Der Download-Link verweist leider noch auf Version 2.0. Ich habe aber genau das Problem, dass ich einen modalen alert brauche… Wo bekomme ich denn die Version 2.2?
    Vielen Dank!

    Christian

  38. Christian sagt:

    In FF 8 geht es nicht. Es wird nicht auf das OK gewartet. Leider keine Option für mich. Schade.

  39. naden sagt:

    Link zeigt nun auf die Version 2.2.

  40. naden sagt:

    Das Script funktioniert auch im Firefox 8. Eine Einschränkung ist, dass die Methode nicht blockiert. Da alert(); aber anders als prompt(); oder confirm(); dem User keine Möglichkeit gibt, eine andere Antwort als “OK” zu geben ist dass verschmerzbar.

  41. Nils sagt:

    Hallo, ich finde das Script wirklich klasse. Sowas habe ich schon lange gesucht. Nun brauche ich es in einem Fall zwingend mit dem IE 8 oder sogar 9. Das Problem ist nur, dass dann die alert-box nicht mehr modal ist. Das könnte in meinem Fall zu bösen Nebenwirkungen führen. Gibt es da eine Chance?
    Unabhängig vom Browser habe ich außerdem das Problem, dass die Box nicht mehr zentriert ist, sobald ich Breit und/oder Höhe individuell angebe.

  42. naden sagt:

    Das Problem mit der Positionierung habe ich gelöst. Bitte lade dir Version 2.3 runter. Das blockierende Verhalten bekommt man leider nicht hin. Einzige Möglichkeit wäre, einen Callback-Handler zu implementieren, der onClick ausgelöst wird.

  43. Maddin sagt:

    Ist dein Script OpenSource?

  44. naden sagt:

    @maddin Du kannst es – wie auch immer nutzen – ohne das ich dir eine Rechnung schicke.

  45. Michael Werner sagt:

    Hallo Naden,

    Ich nutze zum navigieren hauptsächliche die Tastatur und kann das Alert-Fenster weder mit ESC noch ENTER schließen, stattdessen öffnet sich das zweite Alert-Fenster, da der Button noch fokussiert ist ;-) Setze einfach den primären Fokus auf den Button im Fenster!

    Alles Gute aus Hannover,
    Michael

  46. HaOn sagt:

    Also bei mir funktioniert das Skript nicht richtig, und zwar dann nicht, wenn dem Skript hier eine weitere Anweisung folgt, dann wartet das Skript nämlich nicht auf das “OK”. Das wurde in den Kommentaren hier auch schon an anderer Stelle beschrieben.

    Ein Beispiel dafür, was nicht funktioniert:

    alert(‘Titel’, ‘Vielen Dank’, {button_title: ‘ Weiter ‘, modal: false});
    window.location.href = “http://www.google.com/”;

    Ob Modal true oder false ist für den vorliegenden Fall unerheblich. Eine herkömmliche Alert-Anweisung führt die Weiterleitung nach Google erst dann aus, wenn “OK” gedrückt wird. Das hier vorliegende Skript wartet aber nicht auf das “OK”, sondern leitet sofort weiter.

    Das trifft bei mir für alle Browser (Chrome, Firefox, IE, Opera, Safari, Epiphany, Konqueror, … ) unter Windows und Linux zu. Die Version des jeweiligen Browsers spielt dabei auch keine Rolle. Ich teste das in diversen virtuellen Maschinen aus.

  47. naden sagt:

    @HaOn, Ich habe das bereits mehrfach erwähnt und geschrieben, dass es sich nicht um einen Fehler handelt, sondern schlicht nicht anders geht. Die einzige Möglichkeit wäre, eine Funktion mit zu übergeben, die nach dem Klick ausgeführt wird. Das ist aber für die allermeisten Fälle nicht notwendig.

  48. ich sag nur fehlt nurv noch Promt und Confirm ..

    ansosten sher sehr gut

  49. Alex sagt:

    Hallo,
    Ist es möglich eine 2.Funktion zu erstellen die statt ok abbrechen anzeigt, und man beispielsweise mit alertcancel(‘text’) Aufruft?

  50. naden sagt:

    Nein, dafür gibt es bereits tonnenweise andere Scripte – Stichwort jQuery ui. Dieses Script soll einfach nur simpelst alert() überschreiben.

  51. Harry sagt:

    Hi naden,
    ich nutze Dein geniales script auch, um nach dem Absenden eines formulars dem user eine info zu geben und möchte nach dem klick auf ok zur startseite weiterleiten. Du hast ja schon mehrfach erwähnt, dass nachfolgende Anweisungen auch ohne Klick auf ok ausgeführt werden. Und auch dass man dieses mit dem Übergeben einer Funktion zu “lösen” wäre. Wie muss ich das anstellen?
    Ohne dein Script geht das ja so zb:
    if(alert(text))
    {
    document.location.href = seite
    }
    else
    {
    document.location.href = seite
    }

    Was muss ich machen damit das mit Deinem Script geht? Hast Du ein Beispiel parat?

    Gruss Harry

  52. naden sagt:

    @Harry, dass wurde jetzt so oft angesprochen, dass ich mal ein Update nachgeschoben habe. Bitte lade dir die Version 2.4 herunter, da kann optional eine callback-Funktion angegeben werden.

  53. Harry sagt:

    perfekt!!! danke!!!

  54. Marc Meier sagt:

    Hallo,

    ich kann leider so ganz spontan nichts zu irgendwelchen Lizenzen finden. Würde den alert nämlich für eine kleine Software nutzen, die wir für eine Studie an der Uni benötigen.

    Ansonsten, vielen Dank =)

    Gruß
    Marc

  55. Walter Bishop sagt:

    Nice.

  56. Matthias Bleyl sagt:

    Hat man zwei JS-Threads, die beide alert(…) im modalen Modus nahezu gleichzeitig aufrufen (ohne dass die erste Meldung bereits bestätigt wurde), so wird die betreffende Webseite (mindestens im Firefox) nach der nun folgenden Bestätigung der letzten sichtbaren Meldung blockiert.
    Code-Zeile “if(D.modal){var F=document.createElement ..” muss deshalb mindestens geändert werden zu:
    “if (D.modal && !document.getElementById(‘alert-modal’)){..”
    Damit ist die Blockade weg – allerdings bleibt im geschilderten Fall als Problem, dass die erste Meldung einfach verschwindet.

  57. Peter S. sagt:

    Finde dein Script super. Habe es noch leicht abgeändert, damit der Focus automatisch auf dem “OK” liegt….

    Firefoxs Fehlerkonsole meckert jetzt noch folgendes an:

    Warnung: SyntaxError: assignment to arguments is deprecated
    Quelldatei: ../alert.js
    Zeile: 28, Spalte: 2
    Quelltext: arguments = ["", arguments[0]]

  58. Petra Sander sagt:

    …issen SUUUUPER Teil ;-)

    Aber, wenn jetzt hier ein Box aufginge,
    müsste man erst ganz nach oben scrollen
    um die Box zu sehen.
    Ist es viel aufwand der Box mitzuteilen,
    das sie an der Mousposition zu erscheinen hat?

    LG, P.S.

  59. naden sagt:

    @Petra, eine Alertbox an der Mausposition erscheinen zu lassen widerspricht irgendwie der Sache. Eventuell sind Tooltips eher etwas für dich? Wenn ich dich falsch verstanden habe, maile mir einmal mal einen Beispiellink.

  60. Petra Sander sagt:

    Ok, Mousposition war vielleicht falsch ausgedrückt.
    Einen Link kann ich dir leider noch nicht schicken, denn ich teste vorerst alles noch Local.
    Wenn du auch Local testen kannst, könnt ich dir das, was ich bis jetzt habe, gepackt, eMailen.
    Wenn du dann noch Zeit und Lust hättest das teil mal zu starten, würdest du sehr schnell wissen was ich meine.
    Tooltip ist zwar ok, aber noch lange nicht so vielseitig einsetzbar wie dein “Javascript alert”

    LG, P.S.

  61. naden sagt:

    OK, sende mir eine E-Mail. Adresse siehe Impressum.

  62. Nadja Lamisch sagt:

    Hallo,

    dein Javascript alert ist einfach genial!!
    VG Nadja

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>