YUI-based alert box – replace your ugly javascript alert box

This tutorial will explain how you can override the default alert box of your browser, without modifying your existing code and by adding 2 lines of javascript code.

Today, most reputable web hosting companies allow you to do this server-side.

Those 2 famous lines

After downloading the package and extracting it to your folder, add the following lines at the end of your page.

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yuiloader/yuiloader-beta-min.js"></script>
<script type="text/javascript" src="js/alert.js"></script> 

We make use of YUI’s fantastic loader utility which will allows us to load specific YUI components and their dependencies into our page via script from their servers. The second file actually contains all the code which will replace the default alert box by a YUI-based and YUI-skinned one.
Note that it’s better to include the files at the bottom of your page as told earlier as recommended by Yahoo’s Exceptional Performance team for speeding your page.

The HTML code

<a href="#" onclick="alert('Hello World !');">Click to say hi</a>

That’s all, you don’t need to include any CSS or other javascript files. They are all taken from Yahoo servers and you get a nice alert message. If for one reason or another you’re fed up with this alert box, you just remove the included javascript files and it will fall back to the default alert box.

Behind the scenes.

You can open the alert.js file which is well commented to have a look at what’s going behind the scenes. Dav Glass wrote something about this replacement for alert, it’s almost the same thing except all is done through the loader utility. 😉

The alert.js file contains 2 JSON objects namely :

• bootstrap
• ui

bootstrap

bootstrap is responsible for fetching all the components from the Yahoo servers namely :

• container – since we are using the SimpleDialog component to render the alert box
• button – to have the nice button in the box
• fonts – which offers cross-browser typographical normalization and control
• selector – to perform some lookups to add the yui-skin-sam class to the body so as we can use YUI’s skinning system.

ui

The ui in fact initializes our SimpleDialog and then render it

// our dialog for info, to show messages to the users
ui.dialogInfo = new YAHOO.widget.SimpleDialog("simpledialog1", 
{
width: "300px",
fixedcenter: true,
visible: false,
draggable: false,
zIndex: 9999,
close: true,
modal: true,
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
constraintoviewport: true,
buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }]
});
ui.dialogInfo.setHeader("information");
// Render the Dialog
ui.dialogInfo.render(document.body);

It also contains the showDialogInfo method which is called when alert function is called.

window.alert = function(text){
	ui.dialogInfo.setBody(text);
	ui.dialogInfo.show();
};