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 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.


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,
constraintoviewport: true,
buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }]
// Render the Dialog

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

window.alert = function(text){
Be Sociable, Share!

30 thoughts on “YUI-based alert box – replace your ugly javascript alert box”

  1. 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. 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. 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. Hi bhagwat,

    For the icons, you have have 6 different ones, check :

    These can be :
    – ICON_TIP

    so if you want to add an icon to your dialog you can add this line in the init function :

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

  5. Hi Gavin,

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

  6. 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(){

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

  7. 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

  8. 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?

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

    window.alert = function(text){

  10. 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:


    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?

  11. John,

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

  12. 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?

  13. 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(){

    Let me know if it’s ok.

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

Comments are closed.