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.

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();
};
Be Sociable, Share!

Comments (25)

  1. 7:55 pm, August 30, 2008Yashvin  / Reply

    This one is very nice, just like the other examples provided on the official site.

    btw, have a look at Telerik RadControls components for .NET…
    They do cost a lot(not for big companies) but they are worth!

    Really value for money…and i have the great opportunity to use it everyday at work on different projects…not opensource thought…

  2. 11:02 pm, August 30, 2008asvin  / Reply

    you’ll be laughing but I have ZERO experience with .NET. Thanks for the tip for our MS friends out there.;-)

    Anyway, what’s a bit special with the js is that you don’t have to include the CSS files or other dependencies. All is handled by the loader utility but it has a cost as it’s a bit more difficult to customize the look and feel.

  3. 7:35 pm, September 1, 2008Adrian  / Reply

    I took this solution into consideration in the past. The drawback was that this is not interrupting the js execution flow like alert(…) – but, I don’t remember the context now… :)

  4. 11:17 am, September 12, 2008bhagwat  / Reply

    Hello,

    It is really a good Example..
    i want to set icon into that alert.

    how can i do this please help me.

  5. 8:50 pm, September 14, 2008asvin  / Reply

    Hi bhagwat,

    For the icons, you have have 6 different ones, check :
    http://developer.yahoo.com/yui/container/simpledialog/

    These can be :
    - ICON_BLOCK
    - ICON_WARN
    - ICON_HELP
    - ICON_INFO
    - ICON_ALARM
    - ICON_TIP

    so if you want to add an icon to your dialog you can add this line in the init function :
    ui.dialogInfo.cfg.setProperty(“icon”,YAHOO.widget.SimpleDialog.ICON_WARN);

    You can try the different icons. Hope that helps ;-)

  6. 7:19 pm, September 18, 2008Gavin Wye  / Reply

    Nice tutorial.

    Is there a way to get it to stop the rest of the js completing like with the trad alert box?

  7. 10:31 pm, September 19, 2008asvin  / Reply

    Hi Gavin,

    Thanks, but I don’t get your question. Once you include it all alert will be replaced by the YUI based one.

  8. 1:22 am, September 23, 2008george  / Reply

    very nice,

    but how do you call this box from another page. I don’t want to click it to make it work!

  9. 9:36 am, September 23, 2008asvin  / Reply

    Hi George
    If you want to have the alert after the page loads, if you’re using YUI you can add this in your page :
    YAHOO.util.Event.addListener(window, ‘load’, function(){
    alert(‘yourmessage’);
    });

    if you’re not using YUI :
    window.onload = alert(‘yourmessage’);

  10. 8:53 am, September 25, 2008Michael  / Reply

    Hi,

    I tried your script out, but it keeps overriding my CSS, this is a problem. How can i stop this?

  11. 10:03 am, September 25, 2008asvin  / Reply

    Hi Michael

    It’s because the loader is including the fonts css http://developer.yahoo.com/yui/fonts/

    You can remove this by updating alert.js. Find this line :
    // which components we need
    require: ["container", "button", "fonts", "selector"],

    and update it to this :
    // which components we need
    require: ["container", "button", "selector"],

    Let me know if it’s ok

  12. 4:11 pm, September 26, 2008asvin  / Reply

    Hi again Michael

    Your last comment disappeared, I dont know why, maybe I deleted it by accident. Anyway maybe it’s because for the alert to work, it requires other CSS like container.css and button.css. Maybe they’re are in conflict with your CSS. Do you have a demo page which I can have a look?

  13. 8:29 pm, November 3, 2008JumBay  / Reply

    I think you should use the bringToTop() method, before calling the show() method (in case there are many YUI overlay) :

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

  14. 8:44 pm, November 3, 2008asvin  / Reply

    Thanks for the top JumBay ;-)

  15. 3:25 am, November 13, 2008John  / Reply

    Adrian asked a question that really wasn’t answered. The traditional alert call STOPS javascript execution and does not return until the user presses a button to dismiss it. So, if you had 2 alerts in a row:

    alert(‘Hello’);
    alert(‘world’);

    You would see an alert with “Hello” in it until you press OK and then you would see an alert with “world” in it. With this mechanism, I believe you will just see “world”. How do you get JavaScript to stop execution and wait for the alert to be dismissed?

  16. 8:56 am, November 13, 2008asvin  / Reply

    John,

    In fact yui simpledialog doesn’t stop script execution, I remember reading somewhere Dav Glass mentioning that.

  17. 4:34 pm, December 14, 2008Tahir  / Reply

    hi my question here is that wht if i want to apply some CSS on a dialog i want to apply some CSS on dialog box header ? how do i do that?

  18. 8:21 pm, December 15, 2008asvin  / Reply

    Hey Tahir,

    Maybe this article can help you:
    http://developer.yahoo.com/yui/examples/container/skin/1.html

  19. 8:22 am, April 20, 2009Rahul  / Reply

    Is it possible to show alert for certain duration…???

    • 1:43 pm, April 20, 2009asvin  / Reply

      Hi Rahul

      You can use the setTimeout function. For e.g if you want to show the alert for 5 seconds, you can add this :
      setTimeout(“handleHide()”, 5000);

      You cann the handleHide function after 5 seconds after showing the alert box. The handleHide function can contain this :

      var handleHide = function(){
      yourPanel.hide();
      };

      Let me know if it’s ok.

  20. 3:34 pm, April 23, 2009vijay  / Reply

    i already use forms(0), but this script orverwrite the forms(0) how to use?

  21. 9:33 am, May 16, 2009ajay  / Reply

    very nice …………

  22. 11:01 am, August 4, 2009Rahul  / Reply

    This example seems to be cool .
    Is there any alternative way to download all the necessary css and dependecy files.

  23. 9:22 am, September 15, 2010Marlynn  / Reply

    i think some what it is useful.thanks for the post.
    ———–
    Marlynn

Leave a Reply

Allowed Tags - You may use these HTML tags and attributes in your comment.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>