alert-box selber basteln

vollkornbrot

Grünschnabel
Hallo,
hab da ein Problem. Nachdem ich überall gelesen hatte, dass es unmöglich ist, die Ausgabe einer alert-box zu formatieren, habe ich beschlossen, mir selbst eine zu basteln. Grundidee ist, dass meine alert-box ein Element als Parameter nimmt(z.B hier eine Tabelle), und es dann wie die echte alert-box am Bildschirm ausgibt. Leider ist mir das gründlich misslungen:( Bisher habe ich folgendes versucht:
Zum verdunkeln vom Hintergrund:
Code:
function abdunkeln(){
  var body=document.getElementsByTagName("body")[0];
  var ueberdiv=document.createElement("div");
  ueberdiv.id="abdunkeln";
  ueberdiv.style.width=window.innerWidth-30+"px";
  ueberdiv.style.height=window.innerHeight-30+"px";
  ueberdiv.style.position="absolute";
  ueberdiv.style.zIndex=1000; //Soll über allem anderem liegen
  ueberdiv.style.margin="auto";
  ueberdiv.style.backgroundColor="black";
  ueberdiv.style.opacity="0.5"; //andere Elemente sollen wie bei echter alert-box durchschimmern
  body.insertBefore(ueberdiv,body.firstChild);
  window.addEventListener("resize",function(){ //damit div sich der Fenstergröße anpasst
    var dunkel=document.getElementById("abdunkeln");
    dunkel.style.width=window.innerWidth-30+"px";
    dunkel.style.height=window.innerHeight-30+"px";
  });
}

Dieser Teil klappt schon ganz gut:)
Die Probleme daran sind:
1. Es klappt nur, wenn kein anderes Element einen z-index über 1000 hat
2. Es klappt nur, wenn die Seite bereits fertig geladen ist.

Zugegeben, das sind kleine Fehler, aber wie macht die echte alert-box das? :confused::confused:

Noch schlimmer, die eigentliche alert-box:

Code:
function alertElement(elem,buttons){
 abdunkeln();
 var alertDiv=document.createElement("div");
 alertDiv.appendChild(elem);
 alertDiv.style.margin="auto"; //zentrieren
 alertDiv.style.zIndex=1001;
 alertDiv.style.opacity="1"; //damit alert-box nicht durchsichtig ist
 alertDiv.style.backgroundColor="white";
 document.getElementById("abdunkeln").appendChild(alertDiv);
}

Meine Probleme sind:
1. Die Box ist nicht vertikal zentriert. Wie macht man das****
2. Die echte alert-box wird ausgedehnt, je nachdem, wie lang der Text ist. Wie funktioniert das?
3. Sowohl die Elemente als auch das background-image hinter dem alert schimmern durch!
alert.PNG
4. Die echte alert-box pausiert das JavaScript der Seite. Wie geht das:confused:

Wäre echt toll, wenn mr jemand erklären könnte oder vllt. den Code den original-alert-box posten könnte, falls dieser offen verfügbar ist.
Danke schon mal im Voraus.
 
Zurück