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
No comments:
Post a Comment