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:
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?
Noch schlimmer, die eigentliche alert-box:
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!
4. Die echte alert-box pausiert das JavaScript der Seite. Wie geht das
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.
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?
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!
4. Die echte alert-box pausiert das JavaScript der Seite. Wie geht das
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.