Eine Confirmbox mit JavaScript

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.01 - 6.22, 7.0 und 7.1, sowie Mozilla 1.0, 1.21 und 1.4.
(Wenn Opera mit eingebunden wird, wie bei der Alertbox, bleibt gelegendlich der OK- und/oder Abbrechen-Button stehen !?)

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

Das Verschieben der Confirm-Box funktioniert bisher nur im IE.

Demo: Hier

Quelltext:

Seite, auf der die Confirm-Box erscheinen soll.

<html>
  <head>
    <title>Confirm-Box</title>

    <script language="JavaScript">
      confirmWidth=300; //Confirm-Box-Mindest-Breite
      confirmHeight=200; //Confirm-Box-Mindest-Höhe
      xConfirmStart=300,yConfirmStart=100; //Wo die Confirm-Box erscheinen soll

      //Titelzeile:
      confirmTitle="<p align='center'><b>JavaScript Confirm !!!</b></p>";

      //Haupttext:
      confirmText="<p align='center'>Dieses Script begeistert Sie ? ...</p>";

      //Was passieren soll, wenn auf OK oder Abbrechen geklickt wird:
      function okConfirm() {
        document.getElementById("confirm").style.top=-500; //Confirm-Box verstecken
        document.location.href="mailto:albert@jjam.de"; //Mail-Programm aufrufen
      }
      function abortConfirm() {
        document.getElementById("confirm").style.top=-500; //Confirm-Box verstecken
        //ggf. weitere Anweisungen
      }

      //Für andere Browser
      function confirmAlternative() {
        if(confirm("Dieses Script ist nicht für Ihren Steinzeit-Browser gedacht! ..."))
          document.location.href="mailto:albert@jjam.de"; //bei OK
        //ggf.: else irgendwas
      }
    </script>

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

  </head>

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

</html>

Durch Auslagerung der leeren Confirm-Box 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. (Nicht bei deaktiviertem Cache versteht sich.)

Die leere Confirm-Box-Vorlage (Confirm.js), ohne Layout-Angaben:

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

//Confirm-Box erstellen
if(ie5||nn6) {
  document.write(
    "<div style='position:absolute;top:-500;left:0;z-index:100' id='confirm'>"+
      "<table onmousedown='getxyRelativ()'"+
          "onmousemove='moveConfirm()' onmouseup='moveStatus=0'>"+
        "<tr><td>"+confirmTitle+"</td></tr>"+
        "<tr><td>"+confirmText+"</td></tr>"+
        "<tr><td>"+
          "<input type='button' value='OK' onclick='okConfirm()'"+
          "<input type='button' value='Abbrechen' onclick='abortConfirm()'>"+
        "</td></tr>"+
      "</table>"+
    "</div>"
  );
}

//Confirm-Box anzeigen
function showConfirm() {
  moveStatus=0;
  xConfirm=xConfirmStart, yConfirm=yConfirmStart;
  if(ie5) {
    document.getElementById("confirm").style.left=xConfirm+document.body.scrollLeft;
    document.getElementById("confirm").style.top=yConfirm+document.body.scrollTop;
  }
  else if(nn6) {
    document.getElementById("confirm").style.left=xConfirm+window.pageXOffset;
    document.getElementById("confirm").style.top=yConfirm+window.pageYOffset;
  }
  else confirmAlternative();
}

//Relative Mausposition auf der Confirm-Box ermitteln
var xRelativ, yRelativ;
function getxyRelativ() {
  moveStatus=1;
  if(ie5) {
    xRelativ=event.clientX-xConfirm;
    yRelativ=event.clientY-yConfirm;
  }
}

//Confirm-Box bewegen (nur IE)
function moveConfirm() {
  if(ie5&&moveStatus>0) {
    xConfirm=document.getElementById("confirm").style.left=
        event.clientX+document.body.scrollLeft-xRelativ;
    yConfirm=document.getElementById("confirm").style.top=
        event.clientY+document.body.scrollTop-yRelativ;
  }
}

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