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 SadaProgrammer 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.
Download source code
Take a look here for a live preview1. 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>
<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() {
</script>
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
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
thanks for sharing! Very nice...
Thank you for this script
Awesome!
This might be usefull to me!
Thank you for sharing! =)
great work, thanks for sharing.
http://scorpiious.net
wow, amazing!
very nice!!...it's very very...mmm!
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
Bueno!
Graçias
Impressive, but not much use to give a **noscript** alert, is it ?
Hey very big thx,
this is what i was looking for for several weeks. !!
Banana
This is very cool! I love lightbox variations!
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
great work!
how to make it a page entry? without using onclick link!
thanks!
Is there way to have it onload instead of onclick?
This would be a great way to inform users of something really important.
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!
Nice job guys! Found this through Noupe.
Thanks for script. I always looking for something new. And you give me this. thanks for sharing.
On the mootools download page, we can select our tools, what are the minimum requirements, I'm trying to minimize the script.
Muy bien, Eduardo. Exactamente o que queria
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.
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?
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
it has problems with Google Chrome.
@Sepehr Lajevardi
I installed Google Chrome today, I don't have any problems, can you share what was happening with your installation ?
@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!
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 ?
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 ;)
Thank you for sharing, very nice. The overlay gradient is is a solid black rather a see through grey in IE.
rai
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
Great! Simple and very sexy alert box! Great job! I love it!
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?
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!
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;
}
}
});
}
Hello,
Do you have the version which will work for mootools 1.1 version?
Thanks
Hello,
Can the message box be used to load external html link like iframe?