Eigene Alertbox

Mit diesem Javascript erzeugt ihr eure eigene Alertbox, welche sich von den üblichen grauen Alertboxen abhebt. Mit den Variablen am Beginn des Javascripts könnt ihr eure Alertbox selber noch anpassen (Breite und Höhe ändern, Titel ändern, Text ändern sowie Position ändern).

Viel Spass damit!!

HIER klicken zur Demonstration

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- // Danke an Albert Kluge - www.jjam.de alertWidth=300; // Breite des Fensters alertHeight=200; // Höhe des Fensters xAlertStart=300; yAlertStart=100; alertTitle="<p align='center'><b>JavaScript Alert !!!</b></p>"; alertText="<p align='center'>Hallo, ich bin eine Dialogbox !<br /><br />Im Internet Explorer 5+ lasse ich mich sogar verschieben.</p>"; function okAlert() { document.getElementById("alert").style.visibility="hidden"; } function alertAlternative() { alert("Hallo, ich bin auch eine Dialogbox !nnAber leider nicht so hübsch wie im IE 5+ oder NN 6+."); } //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) { if(ie5) cp=5,cs=2,th=30,bh=50; else if(nn6) cp=2,cs=0,th=22,bh=35; else cp=0,cs=1,th=15,bh=20; //wg. Layout document.write( "<div style='position:absolute;top:-500;left:0;z-index:100' id='alert'>"+ "<table style='border-style:outset;border-width:2;border-color:#E6E6CD;background-color:#F5F5DC' cellpadding='"+cp+"' cellspacing='"+cs+"' width='"+alertWidth+"' height='"+alertHeight+"' onmousedown='getxyRelativ()' onmousemove='moveAlert()' onmouseup='moveStatus=0'>"+ "<tr><td height='"+th+"' bgcolor='#DEDEC5'>"+alertTitle+"</td></tr>"+ "<tr><td>"+alertText+"</td></tr>"+ "<tr align='center'><td height='"+bh+"'>"+ "<input style='background-color:#E9E9CF;border-width:1;font-weight:bold' type='button' value='    OK    ' onclick='okAlert()' onfocus='if(this.blur)this.blur()'>"+ "</td></tr>"+ "</table>"+ "</div>" ); } // Box 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 ermitteln var xRelativ, yRelativ; function getxyRelativ() { moveStatus=1; if(ie5) { xRelativ=event.clientX-xAlert; yRelativ=event.clientY-yAlert; } } // Verschieben nur für 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; } } //--> </script> <p><a href="javascript:showAlert()" onfocus="if(this.blur)this.blur()">HIER</a></p> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/verschiedenes/eigene-alertbox/" target="_blank">kostenlose-javascripts.de</a> <!-- präsentiert von kostenlose-javascripts.de -->