Hi all,
I just want to ask you a simple question. I can't find the answer anywhere.

How can I change the alert's title in javascript?

9 Years
Discussion Span
Last Post by Airshow


Sorry, I'm not sure I fully understand but here's my best guess ..... alert is a native javascript function and as such doesn't have a title (as do some HTML elements).

The appearance/format of a javascript alert popup is browser-dependant and is not under programmatic control (except for the alert message itself).

A way to exert control over the appearance of an alert is to write your own myAlert(message){...} function which displays an absolutely positioned div, with message inserted using DHTLM/DOM techniques.



thank you Airshow..

I did understand..
Maybe, I will use jQuery to solve the problem..


I'm new in Xhtml/javascript coding.
How to coding title bar in an alert dialog box?
Anybody can help!


Nice effect Chandru but the code contains angled single and double quotes which need to be changed to stright single and double quotes. Some (most?) browsers baulk at angled quotes.

Also the code is not fiully cross-browser and doesn't take h/v scroll into account.

Here's my version[/URL] based on the one posted by Chandru above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<style type="text/css">
#CustomAlert {
visibility: hidden;
position: absolute;
z-index: 999;
top: 200px;
left: 200px;
width: 100px;
height: 50px;
border-style: groove;
border-width: 5px;
border-color: #FFFFFF;
cursor: default;
filter: alpha(opacity=90);
background-color: silver;
text-align: center;
#CustomAlertSampleokButton {
background-color: silver;
font-color: #000000;
font-size: 9pt;
font-family: arial;
width: 70px;
height: 20px; 
#CustomAlertTitle {
background-color: dimgray;
font-family: arial;
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
#CustomAlertMessage {
font-family: arial;
font-size: 11pt;
color: #000000;
font-weight: normal;
var CUSTOM_ALERT = function(){//Namespace pattern
	var alertBox = null, titleEl = null, messageEl = null;
	return {
		hide : function(){
			alertBox.style.visibility = 'hidden';
		alert : function(aTitle, aMessage){
			if(!alertBox) alertBox = document.getElementById("CustomAlert");
			if(!titleEl) titleEl = document.getElementById("CustomAlertTitle");
			if(!messageEl) messageEl = document.getElementById("CustomAlertMessage");
			titleEl.innerHTML = aTitle;
			messageEl.innerHTML = aMessage;
			thisText = aMessage.length;
			if (aTitle.length > aMessage.length){ thisText = aTitle.length;}
			aWidth = Math.min(Math.max(thisText*5+80, 150), 350);
			aHeight = (thisText>610) ? 290 : (thisText>550) ? 270 : (thisText > 490) ? 250 : (thisText > 420) ? 230 : (thisText > 360) ? 210 : (thisText > 300) ? 190 : (thisText > 240) ? 170 : (thisText > 180) ? 150 : (thisText > 120) ? 130 : (thisText > 60)? 110 : 100;
			alertBox.style.width = aWidth + 'px';
			alertBox.style.height = aHeight + 'px';
			var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			var hScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
			var vScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
			alertBox.style.left = hScroll + (left - aWidth)/2 + 'px';
			alertBox.style.top =  vScroll + (top - aHeight)/2 + 'px';
			alertBox.style.visibility = 'visible';

<div id="CustomAlert">
	<table border="0" width="100%" height="100%">
	<tr height="5"><td colspan="4" id="CustomAlertTitle"></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" id="CustomAlertMessage"></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="CUSTOM_ALERT.hide();" id="CustomAlertSampleokButton"></td><td width="5"></td></tr>
	<tr height="5"><td width="5"></td></tr>


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

It's still not perfect. The algorithm for calculating an appropriate aHeight could be better (in FF).

I'm sure someone knows of better code. In one of the productivity libs (or a pluguin) maybe.


This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.