Saturday, March 03, 2007 8:53 AM
PhaniRajuYN
Customizing the Alert Messages in IE
Have you ever felt that this looks ugly ?
Did you ever want to customize the Image , the text, the Icons ?
You would probably want to customize it to the Look and feel of your web application.
We are gonna talk about how to customize the Alert Box in IE .
When we are done , it will look like this .
We can change the Default ALERT function with Javascript .
window.alert=function( alertMessage ){
//Function Body
}
Thats it!!! Thats the Magic line!
With this function , you can customize the way the alert messages are shown.
I will demonstrate one way to render the custom Alert message.
We will put a DIV in the Page that will show the alert message .
<div id="alertPanel">
</div>
We will form the body by forming a string containing the representational HTML .
<DIV> //To Contain the Alert Message
<IMG> //The icon of the message prompt
<SPAN> //This element contains the text to be shown
<INPUT TYPE="BUTTON"/> //The Button to close the alert message
</DIV>
Actual Code showing the same
var alertBox = "<DIV style=\"width:350px;height:70px\" class=\"alertPosition\">";
alertBox +="<div class=\"alertBoxIn\" >";
alertBox +="<img src=\"images/InfoBox-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+alertMessage+"</SPAN>";
alertBox +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\" Ok \" onclick=\"closeAlert();\" />";
alertBox+="</div>";
alertBox+="</div>";Once the Body of the Alert message is formed , we need to add it to the document.
we will do this by injecting the body of the Alert Message into the alertPanel Div that we already have on the page .
document.getElementById("alertPanel").innerHTML = alertBox;
Upon click of the Button , you would want to close the alert message .
We close the Alert message by removing it from the document .
document.getElementById("alertPanel").innerHTML = "" ;
The Completed Function looks like this ......
window.alert=function( alertMessage )
{
var alertBox = "";
alertBox +="<div style=\"width:350px;height:70px\" class=\"alertBoxIn alertPosition\" >";
alertBox +="<img src=\"images/InfoBox-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+alertMessage+"</SPAN>";
alertBox +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\" Ok \" onclick=\"closeAlert();\" />";
alertBox+="</div>";
document.getElementById("alertPanel").innerHTML = alertBox;
document.getElementById("alertPanel").focus();
}
Bonus:
Creating your own alert prompt message
I changed the icon to make it look like an error message .
See here.....
The javascript for this custom error function is :
function ErorMessage( errorMessage )
{
var alertBox = "<DIV style=\"width:350px;height:70px\" class=\"alertPosition\">";
alertBox +="<div class=\"alertBoxIn\" >";
alertBox +="<img src=\"images/ErrorCircle-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+errorMessage+"</SPAN>";
alertBox +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\" Ok \" onclick=\"closeAlert();\" />";
alertBox+="</div>";
alertBox+="</div>";
document.getElementById("alertPanel").innerHTML = alertBox;
}Once this function is implemented, you can use the alert in your functions normally , be sure to include the script and the div "alertPanel".
The Complete code looks like this ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Client Side Documentation</title>
<link href="css/defaultStyles.css" rel="stylesheet" type="text/css">
<script language="javascript">
window.alert=function( alertMessage )
{
var alertBox = "";
alertBox +="<div style=\"width:350px;height:70px\" class=\"alertBoxIn alertPosition\" >";
alertBox +="<img src=\"n\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+alertMessage+"</SPAN>";
alertBox +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\" Ok \" onclick=\"closeAlert();\" />";
alertBox+="</div>";
document.getElementById("alertPanel").innerHTML = alertBox;
document.getElementById("alertPanel").focus();
}
function ErorMessage( errorMessage )
{
var alertBox = "<DIV style=\"width:350px;height:70px\" class=\"alertPosition\">";
alertBox +="<div class=\"alertBoxIn\" >";
alertBox +="<img src=\"images/ErrorCircle-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+errorMessage+"</SPAN>";
alertBox +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\" Ok \" onclick=\"closeAlert();\" />";
alertBox+="</div>";
alertBox+="</div>";
document.getElementById("alertPanel").innerHTML = alertBox;
}
function closeAlert()
{
var alertBox = document.getElementById("alertPanel");
alertBox.innerHTML ="";
}
</script>
</head>
<body>
<input type="button" value="Alert Popup" onclick="javascript:alert('This is a custom alert message')" />
<input type="button" value="Error Popup" onclick="javascript:ErorMessage('This is a custom Error message')" />
<div id="alertPanel">
</div>
</body>
</html>
PROPS:
The Images I use in the demo come from here ...http://www.iconarchive.com/category/application/vista-elements-icons-by-icons-land.html
The Icons rock !!! If interested , give the author a visit at : http://www.icons-land.com/. I strongly suggest you check them out .
