This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, August 25, 2008

Design a stunning Alert Box using MooTools

Do you want to change the default style of JavaScript Alert Box? Do you want to add a nice animation with MooTools? Take a look at this post!

About the Author

Eduardo Sada
Programmer and Web Designer
Coders.me

The Script

This tutorial explains how to design a stunning Alert Box which changes and improves the classic look of JavaScript Alert Boxes.



The result is something like these you can see in the previous picture. Alert box appears on the page, above all other page elements with a nice animation. Try it!

Download source code Take a look here for a live preview


1. How to install this script
Downloading the package you have all do you need to use this nice script. First of all, add a link to MooTools Framework and to sexyalertbox.js within the <head> tag of the page in this way:

<script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>

...then add this link to the CSS file:

<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />

...and if you want to change the default look of Alert Box you can customize the CSS file how you prefer.

2. HTML Code
Add this line of code within the <body> tag:

<script type="text/javascript">
window.addEvent('domready', function() {
Sexy = new SexyAlertBox();
});
</script>

...and for example create a link which display an alert box with a simple message "Nice!":

<a href="#" onclick="Sexy.alert('Nice!'); return false;">Show a JavaScript alert with a new look!</a>


In this way when an user click on this link an alert box will appear above all other elements of the page. It's all! For other info, please take a look at the documentation you can find at this link.

Related Post
MooTools - Basic Tips for Web Designer
MooTools - Get elements ID using unobtrusive code

blog comments powered by Disqus
Anonymous said...

thanks for sharing! Very nice...

Sharon said...

Thank you for this script

Mini0n said...

Awesome!
This might be usefull to me!
Thank you for sharing! =)

Scorpiious said...

great work, thanks for sharing.

http://scorpiious.net

arthipesa said...

wow, amazing!
very nice!!...it's very very...mmm!

rborn said...

is a nice script, but i have some concerns...
1. i think you should do a preload of images, while u initialize the script - is ugly on first visit...
2. maybe you should remove the animation...in one situation on demo page i had 3 consecutive alerts and was not very funny for my eyes

Hombre said...

Bueno!
Gra├žias

Anonymous said...

Impressive, but not much use to give a **noscript** alert, is it ?

Banana said...

Hey very big thx,

this is what i was looking for for several weeks. !!


Banana

Chris said...

This is very cool! I love lightbox variations!

legal contracts said...

very cool, but the documentation is in a non-english language, which is challenging for dumb american like me... also, wonder what extra file size is? thanks

Anonymous said...

great work!
how to make it a page entry? without using onclick link!
thanks!

Gautch said...

Is there way to have it onload instead of onclick?

This would be a great way to inform users of something really important.

Matt said...

Awesome script!!! I've only used jQuery alerts so I was a little worried I wouldn't find an easy Mootools oriented alert but you proved me wrong!

Eva Vesper said...

Nice job guys! Found this through Noupe.

soman said...

Thanks for script. I always looking for something new. And you give me this. thanks for sharing.

Martin said...

On the mootools download page, we can select our tools, what are the minimum requirements, I'm trying to minimize the script.

Zehntor said...

Muy bien, Eduardo. Exactamente o que queria

Martin said...

Hi again.. any way of showing an image, x.png for example instead of showing 'OK' on Alert box, I just cant get it right.

Anonymous said...

Bravo! Thanks for sharing. :)

However I had a flash on the page and the alert box appears under it. Is there anyway to appear over the flash element?

Anonymous said...

Hi, this is really help me...
just asking, how to make the button focus(), bcoz actually it can edit the textbox behind the alert

Thank in advanced

Sepehr Lajevardi said...

it has problems with Google Chrome.

Martin said...

@Sepehr Lajevardi

I installed Google Chrome today, I don't have any problems, can you share what was happening with your installation ?

Sepehr Lajevardi said...

@Martin
of course. the overlay height in the debut release of Chrome is not covering the whole document height. So the user can access the other elements under the overlay and it's a pain!

Martin said...

hmm thats strange, are you using a rather large screen perhaps? Anyway the script is supposed to get screen height and width (I think ?)

'height': window.getScrollHeight() + 'px',
'width': window.getScrollWidth() + 'px'

Maybe you could enter your own predefined heights & widths 'height':'XXXXpx',

But thinking about that, it may distort other website visitors page sizes ?

Sepehr Lajevardi said...

My display resolution is 1280x1024 and that's not strange, I think. My debut thought was this: "that's a problem with getScrollHeight() in webkit based browsers." but I was in a extremely short time to dig into the problem.

Yes! Making the overlay a static-height element is not the answer, I think. because the document has a dynamic height.

Anyway I hacked through the script and made the overlay a scroller element. So it's scrolling with the user viewport.

Thanks for your care, Martin ;)

Anonymous said...

Thank you for sharing, very nice. The overlay gradient is is a solid black rather a see through grey in IE.
rai

Anonymous said...

If you click on a button that tigers the popup alert, the focus does not change to the "ok" button of the alert. Its a bit of an issue because the focus remains on the button and if you carry on clicking the enter button, the alert request doubles, triples, quadruples.... I hope you get the idea. How can I change the focus to point to the “ok” button?

rai

Alessandro Marinuzzi [Alecos] said...

Great! Simple and very sexy alert box! Great job! I love it!

Matthew said...

Awesome tool! I have noticed one problem, I'm a flash developer and was dropping a flash piece into a page that was using this alert box, its displays behind the flash, any ideas on how to resolve this issue?

Eduardo said...

Hi!
I'm Eduardo Sada, and there is a new version for Sexy Alert Box:

http://www.coders.me/web-html-js-css/javascript/sexy-alert-box-12-mootools-jquery

Now, its compatible with jQuery and mootools :D .

New features and bug fixed!

Suresh said...

HI,

this is very nice.

but i have used this for delete confirmation, it is not returning value outside.

function NoDelete()
{
AB.alert('To delete, click ok.'), {onComplete:
function(returnvalue) {
if(returnvalue)
{
return true;
}
else
{
return false;
}
}
});
}

The-F said...

Hello,

Do you have the version which will work for mootools 1.1 version?

Thanks

Anonymous said...

Hello,

Can the message box be used to load external html link like iframe?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News