Design a stunning Alert Box using MooTools-优快云博客

本文介绍如何利用MooTools框架设计一个外观华丽且功能强大的警告框。通过简单的步骤安装并定制样式，即可在网页上实现带有动画效果的警告框，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

THIS IS A VERY GOOD ARTICLE FROM : http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html

THANKS TO EDUARDO SADA.

Design a stunning Alert Box using MooTools

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:

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

...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:

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.