Customizing the Alert Messages in IE

Customizing the Alert Messages in IE

  • Comments 8

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 .
Leave a Comment
  • Please add 6 and 2 and type the answer here:
  • Post
  • 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

Page 1 of 1 (8 items)