What did I do?
First of all, I needed a way to overwrite the alert function because I didn’t want to go and refactor all of my code to call another function, you programmers understand me ;).
Next is how the message should displayed on the screen.
The first problem is surprisingly easy, you can just overwrite a function by declaring it again.
To display the message, I created a quick container which will be centered. There will also be a container beneath with message box to darken and disable the rest of the page.
Okay, so now for the things you need to do.
Go to http://script.aculo.us/downloads and download the latest version of scriptaculous.
Also download GdAlert: http://gaya.github.io/scripts/gdalert/gdalert.zip
Upload the contents to your server.
Now place the following code in the head section of your page.
Include the following code right after the ** tag:
<div id='alert_message' style='display: none'> <span> </span> <input type='button' value='ok' class='button' onclick='gdAlert.close()' /> <br style='clear: both' /> </div>
That was it. Now all your alert function calls will be nicer and personalized.
Take a look in the CSS to configure the looks of the message box, I’d really like to see what variations you make of this script.