How to customize an alert box [ASAP!]

strawcakes · 11-03-2009, 05:56 PM

Hi,

i need to make my alert box stand out a bit more i have looked everywhere but can't find anything! i was looking to do stuff like Bold, Italics, Underline, Fonts, Sizes, Borders, Backgrounds maybe something that flashed!

i'm not asking you to do it for me just tell me how and were to put the different codes!

and ASAP please as it is in for Thursday!! :S

thanks in advance
:D

Philip M · 11-03-2009, 06:30 PM

It is not possible to customise the standard alert, prompt and confirm boxes.

Google for modal dialog box to see some alternatives.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Philip M · 11-03-2009, 06:58 PM

This example may suit your needs:-

Code:

<html>
<head>

<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: 11pt;
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>
</head>

<body>
<div id="alertLayer" class=alertBoxStyle></div>

<script type = "text/javascript">

var alertBox =  document.getElementById("alertLayer").style

function hideAlert(){
alertBox.visibility = "hidden";}

function makeAlert(aTitle,aMessage){
document.getElementById("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='alert.gif'></td><td align=center 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";
}

// NB the image .alert.gif is required.

</script>

<center>

<br><br><br>
<input type=button value="Click Here For A Normal JavaScript Alert" onClick="alert('A Standard Boring JavaScript Alert');">
<br><br>
<input type=button value="Click Here For A More Attractive Alert" onClick="makeAlert('Your Alert Title','Your Alert Message Goes Here<br>This script is very easy to use and<br>can easily be customised using CSS');">
</center>

</body>
</html>

TinyScript · 11-03-2009, 07:15 PM

http://slayeroffice.com/code/custom_alert/