Eine Alertbox mit JavaScript

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.01 - 6.22, 7.0 und 7.1, Mozilla 1.0, 1.21 und 1.4 sowie Opera 5.02, 5.11, 6.0 und 6.01.

In allen nicht-kompatiblen Browsern erscheint weiterhin die graue Standart-Alertbox.

Das Verschieben der Alertbox funktioniert bisher nur im IE.

Demo: Hier

Quelltext:

Seite, auf der die Alertbox erscheinen soll.

<html>
  <head>
    <title>Alertbox</title>

    <script language="JavaScript">
      alertWidth=300; //Alertbox-Mindest-Breite
      alertHeight=200; //Alertbox-Mindest-Höhe
      xAlertStart=300,yAlertStart=100; //Wo die Alertbox erscheinen soll

      //Titelzeile:
      alertTitle="<p align='center'><b>JavaScript Alert !!!</b></p>";

      //Haupttext:
      alertText="<p align='center'>Hallo, ich bin eine Alertbox ! ...</p>";

      //Was passieren soll, wenn auf OK geklickt wird:
      function okAlert() {
        document.getElementById("alert").style.visibility="hidden"; //Alertbox verstecken
        //ggf. weitere Anweisungen
      }

      //Für andere Browser:
      function alertAlternative() {
        alert("Hallo, ich bin auch eine Alertbox ! ...");
        //ggf. weitere Anweisungen
      }
    </script>

    <!-- Alertbox-Vorlage laden (s.u.) -->
    <script language="JavaScript" src="Alert.js"></script>

  </head>

  <body>
    <!-- Aufruf der Alertbox. Hier per Link -->
    <p><a href="javascript:showAlert()">Alertbox anzeigen</a></p>
  </body>

</html>

Durch Auslagerung der leeren Alertbox in eine .js-Datei, braucht der größte Teil des Scripts nur einmal geladen werden und steht dann ggf. für jede andere Seite sofort zur Verfügung.

Die leere Alertbox-Vorlage (Alert.js), ohne Layout-Angaben:

//Nur für IE 5+, NN6+ und Opera 5+
ie5=(document.getElementById && document.all && document.styleSheets)?1:0;
nn6=(document.getElementById && !document.all)?1:0;
op5=(document.getElementById && document.all && !document.styleSheets)?1:0;

//Alertbox erstellen
if(ie5||nn6||op5) {
  document.write(
    "<div style='position:absolute;top:-500;left:0;z-index:100' id='alert'>"+
      "<table onmousedown='getxyRelativ()'"+
          "onmousemove='moveAlert()' onmouseup='moveStatus=0'>"+
        "<tr><td>"+alertTitle+"</td></tr>"+
        "<tr><td>"+alertText+"</td></tr>"+
        "<tr align='center'><td>"+
          "<input type='button' value='OK' onclick='okAlert()'>"+
        "</td></tr>"+
      "</table>"+
    "</div>"
  );
}

//Alertbox anzeigen
function showAlert() {
  moveStatus=0;
  xAlert=xAlertStart, yAlert=yAlertStart;
  if(ie5) {
    document.getElementById("alert").style.left=xAlert+document.body.scrollLeft;
    document.getElementById("alert").style.top=yAlert+document.body.scrollTop;
    document.getElementById("alert").style.visibility="visible";
  }
  else if(nn6||op5) {
    document.getElementById("alert").style.left=xAlert+window.pageXOffset;
    document.getElementById("alert").style.top=yAlert+window.pageYOffset;
    document.getElementById("alert").style.visibility="visible";
  }
  else alertAlternative();
}

//Relative Mausposition auf der Alertbox ermitteln
var xRelativ, yRelativ;
function getxyRelativ() {
  moveStatus=1;
  if(ie5) {
    xRelativ=event.clientX-xAlert;
    yRelativ=event.clientY-yAlert;
  }
}

//Alertbox bewegen (nur IE)
function moveAlert() {
  if(ie5&&moveStatus>0) {
    xAlert=document.getElementById("alert").style.left=
        event.clientX+document.body.scrollLeft-xRelativ;
    yAlert=document.getElementById("alert").style.top=
        event.clientY+document.body.scrollTop-yRelativ;
  }
}

Download Alert.zip (ca. 1,5 kb)