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 .
You've been kicked (a good thing) - Trackback from DotNetKicks.com
Great! Simple and effective. You rock...
Hello,
Excellent work ! I've tested it on IE 6 and FireFox. It seems working on FF . Is there a reason why you mention only IE ?
Regards.
Hi Cyrille ,
Glad to know that it works on FireFox too :-)
The Reason I mentioned only IE is because I tested it only on IE .
Thanks,
Raj
Hi, I'm using your example, but calling the alert message from a server control in code behind, and it doesn't seem to work, the error I get is document.getElementbyId() is null or not an object..any ideas ??, Here is my code :
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim script As String
script = "alert('Hola')"
If Not ClientScript.IsClientScriptBlockRegistered("Hola") Then
ClientScript.RegisterClientScriptBlock(Me.GetType(), "Hola", script, True)
End If
End Sub
There is a huge difference between the JS built-in alert and your code :
The execution of the javascript code is SUSPENDED in built-in alert until the user click OK.
Definitively something to consider.
Hello Dricks,
Yep , you caught it ! :-)
I was doing this a way of demonstrating that users CAN customize the alert/confirm messages thrown by IE.
Other than the Executing not being suspended. there are other flaws with the sample.
a) You can have only one Alert box shown at a time
b) the Confirm Box is not very useful as an alert box can cause the confirm to be hidden .
as I mentioned , it just shows that you CAN do it ,
Not really a template of Production level code that implements this feature should look like.
Hope this helps
hello. Can anybody tell me why the script is not working ? I copy/paste, and nothing :(
I download a .png but that is only good thing