?
Solved

Customizing Alert boxes

Posted on 2003-03-17
5
Medium Priority
?
217 Views
Last Modified: 2008-02-01
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!
0
Comment
Question by:nef112
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 4

Accepted Solution

by:
thanassis earned 75 total points
ID: 8152989
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
 
LVL 5

Expert Comment

by:Alopederii
ID: 8153002
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
 
LVL 5

Expert Comment

by:Alopederii
ID: 8153005
By the way, you can do a browser check to display MsgBoxes if they have IE, otherwise you can display the traditional alerts.
0
 
LVL 5

Expert Comment

by:msa2003
ID: 8153555
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
 
LVL 5

Expert Comment

by:msa2003
ID: 8153560
Oops... It seems I was too late ;)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question