give a Title in javascript alert box


To give a alert box title in javascript. Please find the files alert.rar in my share box Try the demo below

Free Scripts And Tools

<HTML>
<HEAD>
<TITLE>Free Scripts And Tools</TITLE>
</HEAD>
<BODY>
<STYLE type=”text/css”>
.okButton {
background-color: #D4D4D4;
font-color: #000000;
font-size: 9pt;
font-family: arial;
width: 70px;
height:    20px;
}
.alertTitle {
background-color: #3C56FF;
font-family: arial;
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
.alertMessage {
font-family: arial;
font-size: 9pt;
color: #000000;
font-weight: normal;
}
.alertBoxStyle {
cursor: default;
filter: alpha(opacity=90);
background-color: #E4E4E4;
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 50px;
visibility:hidden; z-index: 999;
border-style: groove;
border-width: 5px;
border-color: #FFFFFF;
text-align: center;
}
</STYLE>
<div id=”alertLayer”></div>
<SCRIPT LANGUAGE=”JavaScript”>
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>” + ” ” + aTitle + “</td></tr>” +
“<tr height=5><td width=5></td></tr>” +
“<tr><td width=5></td><td width=20 align=left><img src=’alert.gif’></td><td align=center>” + 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()’><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”;
}

// WHEN YOU WANT TO GENERATE AN ALERT DO THIS:
// CALL THE makeAlert FUNCTION AND PASS THE ALERT TITLE AND THE MESSAGE
// TO THE FUNCTION.
// eg. makeAlert(‘My Alert Title’ , ‘My Alert Message’);
</SCRIPT>
<CENTER>
Click on the bellow buttons and compare the two alerts. You will see that the Alert is just like the JavaScript alert but looks 10 times better. <BR>
<BR>
<BR>
<INPUT TYPE=button value=”Click Here For A Normal JavaScript Alert” onClick=”alert(‘A Boring JavaScript Alert’);”>
<BR>
<BR>
<a href=”javascript:void(0);” onClick=”makeAlert(‘karuppasamy’,’Your Alert Message Goes Here, This Script Is Very Very Easy To Use’);”>Click Here</a>
<P>
</BODY>
</HTML>

Advertisements

2 comments on “give a Title in javascript alert box

  1. Hy, karuppasamy!
    I’m sorry but didn’t works.
    I’ve tried to replace the “makeAlert” function to simply send an alert window and goes fine but, using the code you’ve write above, don’t work.
    Maybe some wrong signal or letter…
    Thanks a lot, it’s a great idea to customize the alert windows !

  2. Hy, karuppasamy!
    It seems a problem in alertBox object definition.
    Maybe some code is needed to better define what is “alerBox” to javascript.
    I’ll keep trying, right ?
    Regards !!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s