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