hi there .. i just played a code then i got this one ..
now you can make your own alert box ..
put your own title and change it's colors ..
preview?
[url=http://mhedge.web44.net/notes/preview.php?code=alert]
click here[/url]
first you need to put this at ur css file:
you can edit if you wan't
[quote].okButton {
background-color: #222222;
color: #ffffff;
font-size: 11px;
font-family: microsoft sans serif;
width: 70px;
height: 20px;
border: #333333 1px solid;
}
.alertTitle {
background-color: #1f1f1f;
color: #ffffff;
font-size: 11px;
font-family: microsoft sans serif;
font-weight: bold;
height: 20px;
padding-left:5px;
border: #444444 1px solid;
}
.alertMessage {
color: #ffffff;
font-size: 11px;
font-family: microsoft sans serif;
font-weight: normal;
}
#alertLayer{
cursor: default;
filter: alpha(opacity=90);
background-color: #222222;
position: absolute;
top: 150px !important;
left: 200px;
width: 100px;
height: 50px;
visibility:hidden; z-index: 999;
text-align: center;
border: #666666 1px solid;
}[/quote]
then put this at ur js file
[quote]/*
// Custom Alert Box
// By Mhedge Catalan
*/
document.write("<div id=\"alertLayer\" class=alertBoxStyle>..</div>");
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
alertBox = (is.VER5) ? document.getElementById("alertLayer").style
: (is.NS) ? document.layers["alertLayer"]
: document.all["alertLayer"].style;
function hideAlert(){
alertBox.visibility = "hidden";}
function makeAlert(aTitle,aMessage){
document.all.alertLayer.innerHTML =
"<table border=0 width=100% height=100%>" +
"<tr height=5><td colspan=4 class=alertTitle>" + " " + aTitle + "</td></tr>" +
"<tr height=5><td width=5></td></tr>" +
"<tr><td width=5></td><td width=20 align=left><img src='http://s4.tinypic.com/1sgwmc_th.jpg'></td><td align=left class=alertMessage>" + aMessage + "<BR></td><td width=5></td></tr>" +
"<tr height=5><td width=5></td></tr>" +
"<tr><td width=5></td><td colspan=2 align=center><input type=button value='OK' onClick='hideAlert()' class=okButton><BR></td><td width=5></td></tr>" +
"<tr height=5><td width=5></td></tr></table>";
thisText = aMessage.length;
if (aTitle.length > aMessage.length){ thisText = aTitle.length; }
aWidth = (thisText * 5) + 80;
aHeight = 100;
if (aWidth < 150){ aWidth = 200; }
if (aWidth > 350){ aWidth = 350; }
if (thisText > 60){ aHeight = 110; }
if (thisText > 120){ aHeight = 130; }
if (thisText > 180){ aHeight = 150; }
if (thisText > 240){ aHeight = 170; }
if (thisText > 300){ aHeight = 190; }
if (thisText > 360){ aHeight = 210; }
if (thisText > 420){ aHeight = 230; }
if (thisText > 490){ aHeight = 250; }
if (thisText > 550){ aHeight = 270; }
if (thisText > 610){ aHeight = 290; }
alertBox.width = aWidth;
alertBox.height = aHeight;
alertBox.left = (document.body.clientWidth - aWidth)/2;
alertBox.top = (document.body.clientHeight - aHeight)/2;
alertBox.visibility = "visible";
}[/quote]
now to make the alerts
just add this to ur codes : put it at last part or inside onload handler
[quote]makeAlert('[b]YOUR TITLE[/b]','[b]YOUR MESSAGE HERE[/b]');[/quote]
to add more
[quote]makeAlert('[b]YOUR TITLE[/b]','[b]YOUR MESSAGE HERE[/b]');
makeAlert('[b]YOUR TITLE[/b]','[b]YOUR MESSAGE HERE[/b]');
makeAlert('[b]YOUR TITLE[/b]','[b]YOUR MESSAGE HERE[/b]');[/quote]
Last edited by mhedge (2008-11-30 04:05:02)