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.
Demo of the alert box
Download javascript file
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(); };
Demo of the alert box
Download javascript file














[...] The html blog | YUI-based alert box - replace your ugly javascript alert box [...]
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…
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.
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… :)
Hello,
It is really a good Example..
i want to set icon into that alert.
how can i do this please help me.
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 ;-)
Nice tutorial.
Is there a way to get it to stop the rest of the js completing like with the trad alert box?
Hi Gavin,
Thanks, but I don’t get your question. Once you include it all alert will be replaced by the YUI based one.
very nice,
but how do you call this box from another page. I don’t want to click it to make it work!
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’);
Hi,
I tried your script out, but it keeps overriding my CSS, this is a problem. How can i stop this?
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
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?
[...] Source: http://www.htmlblog.net [...]
[...] Вот как это будет выглядеть:Идею я позаимствовал у Asvin Baloo и несколько переделал реализацию. Суть метода [...]
[...] [...]
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();
};
Thanks for the top JumBay ;-)
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?
John,
In fact yui simpledialog doesn’t stop script execution, I remember reading somewhere Dav Glass mentioning that.
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?
Hey Tahir,
Maybe this article can help you:
http://developer.yahoo.com/yui/examples/container/skin/1.html
Is it possible to show alert for certain duration…???
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.
very nice …………
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 3:36 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]