YUI-based alert box – replace your ugly javascript alert box
Filed under Javascript
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();
};
Share This
Aug30
August 30, 2008 at 3:03 pm
[...] The html blog | YUI-based alert box – replace your ugly javascript alert box [...]
August 30, 2008 at 7:55 pm
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…
August 30, 2008 at 11:02 pm
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.
September 1, 2008 at 7:35 pm
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… :)
September 12, 2008 at 11:17 am
Hello,
It is really a good Example..
i want to set icon into that alert.
how can i do this please help me.
September 14, 2008 at 8:50 pm
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 ;-)
September 18, 2008 at 7:19 pm
Nice tutorial.
Is there a way to get it to stop the rest of the js completing like with the trad alert box?
September 19, 2008 at 10:31 pm
Hi Gavin,
Thanks, but I don’t get your question. Once you include it all alert will be replaced by the YUI based one.
September 23, 2008 at 1:22 am
very nice,
but how do you call this box from another page. I don’t want to click it to make it work!
September 23, 2008 at 9:36 am
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’);
September 25, 2008 at 8:53 am
Hi,
I tried your script out, but it keeps overriding my CSS, this is a problem. How can i stop this?
September 25, 2008 at 10:03 am
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
September 26, 2008 at 4:11 pm
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?
September 26, 2008 at 5:04 pm
[...] Source: http://www.htmlblog.net [...]
September 29, 2008 at 10:22 am
[...] Вот как это будет выглядеть:Идею я позаимствовал у Asvin Baloo и несколько переделал реализацию. Суть метода [...]
October 30, 2008 at 9:20 pm
[...] [...]
November 3, 2008 at 8:29 pm
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();
};
November 3, 2008 at 8:44 pm
Thanks for the top JumBay ;-)
November 13, 2008 at 3:25 am
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?
November 13, 2008 at 8:56 am
John,
In fact yui simpledialog doesn’t stop script execution, I remember reading somewhere Dav Glass mentioning that.
December 14, 2008 at 4:34 pm
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?
December 15, 2008 at 8:21 pm
Hey Tahir,
Maybe this article can help you:
http://developer.yahoo.com/yui/examples/container/skin/1.html
April 20, 2009 at 8:22 am
Is it possible to show alert for certain duration…???
April 20, 2009 at 1:43 pm
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.
April 23, 2009 at 3:34 pm
i already use forms(0), but this script orverwrite the forms(0) how to use?
May 16, 2009 at 9:33 am
very nice …………
June 8, 2009 at 2:06 am
[...] 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. [...]
August 4, 2009 at 11:01 am
This example seems to be cool .
Is there any alternative way to download all the necessary css and dependecy files.
August 4, 2009 at 3:31 pm
you can download the YUI library :
http://developer.yahoo.com/yui/
and then update the path in the script
September 15, 2010 at 9:22 am
i think some what it is useful.thanks for the post.
———–
Marlynn