Override alert() with a YUI Dialog

Jeffrey Cobb — Sun, 08 Mar 2009 12:34:18 +0000

You know and I know and everyone knows the alert boxes generated by the browsers are OLD-SCHOOL and look like garbage. Well using YUI you can easily change that by just including a little code in you page. Simply add the code below to the bottom of your page just before the end body tag then add the body style to the begining body tag called “yui-skin-sam” and that’s it. Oh and don’t forget to include your YUI Framework base and the additional scripts “container”, “dragdrop” and “animation”. For an example on how to included the YUI Framework and load specific parts check out for a quick start guide for YUI Loader and Yahoo CDN.

AlertDialog = new YAHOO.widget.SimpleDialog("dlg1", {
  width: "200px",
  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.15},
  fixedcenter:true,
  modal:true,
  visible:false,
  close: true,
  constraintoviewport: true,
  buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }],
  draggable:false,
                effect: [
                      { effect:YAHOO.widget.ContainerEffect.FADE,duration:0.1 }]
});

AlertDialog.setHeader("Alert");
AlertDialog.render(document.body);
window.alert = function(text) {
  AlertDialog.cfg.setProperty("text",text);
  AlertDialog.show();
};

Click HERE for an example:

A permanent solution!

If you would like to override the alert box throughout your entire site or application, save the code to your server in a public script folder. Example: as alertBox.js. Then load the script using YUI Get with-in the YUI Loader BEFORE firing off your init() routine. Here is an example.

YUI Coder » Dialog

Override alert() with a YUI Dialog

A permanent solution!