Customizing Alert boxes

I was wondering if anyone could let me know what degree of customization is possible when using alert boxes.  Can you change the colors, etc. to give it more of the look and feel of the website itself, or is it pretty much limited to the gray box?  Please let me know if you have any information (article, experience, code, etc.) about this.

Thank you!
nef112Asked:
Who is Participating?
 
thanassisConnect With a Mentor Commented:
JavaScript has no built in message boxes, alert, confirm and prompt are
methods of the window object. The alert box settings are 'hard-coded' into
the browser and the icon and title cannot be changed, neither can the
buttons on the confirm box, you're stuck with 'OK' and 'Cancel'
0
 
AlopederiiCommented:
You cannot change alerts.  However, in IE, you have a little more control over a MsgBox.  You can't change the colors, etc., but at least you can choose what buttons it has and what icon it uses.

Check out:
http://www.webreference.com/dhtml/column22/index.html
and
http://javascript.internet.com/messages/vb-message-box-creator.html

I hope this helps!
0
 
AlopederiiCommented:
By the way, you can do a browser check to display MsgBoxes if they have IE, otherwise you can display the traditional alerts.
0
 
msa2003Commented:
You could try the following to create custom alert:

<html>
<head>
<script>
alertBgColor = 'lightblue';
alertTextColor = 'blue';
alertWindowHeight = 120;
alertWindowWidth = 350;
alertFontSize = 7;
alertFontFace = 'times';
alertTitle = 'My custom alert';

w=0;

function customAlert(Message)
{
  w = window.open('', '', 'dependent=yes,height='+alertWindowHeight+
   ',width='+alertWindowWidth+',menubar=no,resizable=no,scrollbars=no,titlebar=no');
  w.moveTo((parseInt(screen.width)-alertWindowWidth)/2, (parseInt(screen.height)-alertWindowHeight)/2);
  w.document.write('<html><head><title>'+alertTitle+'</title></head><body bgcolor="'+alertBgColor+'">'+
    '<font size="'+alertFontSize+'" color="'+alertTextColor+'" face="'+alertFontFace+'">'+
    Message+'</font><center><button onClick="window.close();">&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;'+
    '</button></center></body></html>');
}
</script>
</head>
<body>
<button onClick="customAlert('Hello, world!');">Allert</button>
</body>
</html>

Just change the alertBgColor, alertTextColor, alertWindowHeight, alertWindowWidth, alertFontSize, alertFontFace, alertTitle properties as you would like.

Also refer to http://www.jaws.umn.edu/javascript_1.1/win.htm#1152528
0
 
msa2003Commented:
Oops... It seems I was too late ;)
0
All Courses

From novice to tech pro — start learning today.