Why should I redesign the alert message box?
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.)
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
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.
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:
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.
Of course it could be designed using any CSS. The key is that it is displayed when the overwritten alert() method is called.