Just the weekly tutorials.

Replacing the native JavaScript alert message box with a custom CSS style

Is it possible to change the style of the window box produced by the alert() method using CSS and JavaScript? Would it be possible to change the default alert sound being played?

It's your browser, isn't it? And it is your JavaScript. And your alert() message box. You can style it to match the desire of your heart(or at least design of your website.)

Why should I redesign the alert message box?

The alert method is commonly used to debug (test) JavaScript code without having to open a development console. It produces a quickly accessible message directly over your web page.

However, alert() produces a message box that may not always look acceptable or clean. It also triggers the default "ding" sound which makes the visitor think they did something wrong (most people are not even going to read the error message.)

Preview: I created a jQuery message box plugin which is trivial to use. Include it in your project and then, to initiate it call $.jqWolfer() in your $(document).ready(function(){ /* here */ }) to enable it. Follow the link to see what the new message box looks like and to begin using it in your own projects. If you are curious about how it was made, the JavaScript tutorial lesson on this page explains how to build one yourself.

Note: It is probably in many ways better to use the console.log method to check values of variables and enter JavaScript statements, however this is not the subject of this tutorial which is about overriding the window object's alert method.

The solution to this lies in overriding the alert message box with your own code. It would be nice if we could style the alert box with our own CSS. The alert message box can inherit any look that you are capable of designing in CSS. This article explains how to do that.

Overwriting (overriding) the native alert method

Overriding simply means replacing the default pre-existing function of a JavaScript method with your own. Each JavaScript method has a name. The method that displays the classic alert message box is called alert. In order to overwrite it with our own code we can "re-assign" it (point it to a new function written by ourselves.) By doing this the old functionality will be abandoned and no longer work.

To create a replacement for the default JavaScript alert message box you can override the alert method (which belongs to the main window object) using an anonymous JavaScript function also known as a nameless function. Here is an example:

function(){}

Notice that the function has no name. When this statement (See JavaScript statements article if you need help with understanding statements) occurs in your JavaScript code, the function will not produce any effect whatsoever. Neither can it be called or executed until a name is assigned to it.

Why bother using a function that can not be called by name? There is a reason. The function can be executed when an event occurs. The event is not triggered by the code written by you, but rather by an action or at a specific time.

When will this anonymous function be called? By attaching a nameless function to an event, whenever that event fires, that is when the function will be executed. And this time can be virtually any time, depending on the context of your application.

Knowing what a nameless/anonymous function is, and that it can be attached to an event, let's overwrite the alert method by re-assigning the window.alert method to a nameless function of our own:

<script type = "text/javascript"> // Overwrite the alert() method window.alert = function(sMessage, title) { // Write your own code to execute whenever alert is called return false; }; </script>

We have just replaced the original JavaScript alert function with an anonymous function we created ourselves. It needs no name, but a new name "alert" has been assigned to it.

In addition to overwriting the alert method with our own, we also intercept the string of text contained within the sMessage parameter. The second parameter of the alert message box is the title, we can grab that too. The parameters could be named anything, but I used the parameter name sMessage from the official JavaScript specification, used by the alert method itself.

The small letter s in front of sMessage parameter is indicative of what is known as the Hungarian notation. It is simply a naming convention for variables (also known as variable identifier name.)

That's all. That code that goes within this new function will execute every time the alert("Hello") method will be called. To refer to the "Hello" string from within our new function we would access the sMessage parameter and do whatever with it.

At this point we are free to design our own message box using CSS styles. Let's try it out.

Using CSS to design the new custom alert message box style

Equipped with this knowledge we can now create a custom message box to be displayed whenever alert method is called. The best thing is that it can be created using any CSS style you want.

We can even make it semi-transparent by changing the opacity to a value such as 0.75 or 0.80. The classic alert box will never look the same again. Here is the new message box design I created:

a message box created using jqWolfer jQuery plugin.

It also does a howling sound (a more natural replacement for the default Windows or OSX alert sound effects.) Of course it could be designed using any CSS. The key is that it is displayed when the overwritten alert() method is called.

To find out more, head over to the Wolfer message box plugin page where you can download the code and the CSS style to experiment with on your own website.

Just the weekly tutorials.