Override alert() with a YUI Dialog ...

We all know that using alert in a finished application is not good design, but we often overlook this for the ease of using alert. Well, over at YUICoder they have put together a good post on replacing alert with a YUI dialog box.

Below is an excerpt from the post.

    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();
    };

You can read the full post here.

While this post was written for the Yahoo! User Interface library, it should be fairly easy to port it to a different framework as the concept is the same. So, now we have no excuse to use the standard alert.

 Original Source:
http://www.ajaxonomy.com/2009/yahoo/override-alert-with-a-yui-dialog