Sexy Alert Box with MooTools



The author decided to call SexyAlertBox and is a mod to change the default style of JavaScript Alert Box. This script use MooTools to create the animation and look really good.

Here is another demo:


Adding this effect to your pages is simply. Here is a short guide:

1. Edit the <head>
You can download the package and inside you can find everything what you need for this effect. Before the head tag add this two lines:

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

…add also this line for the CSS file:

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

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

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

…and to have an example create a link which display an alert box with a simple message:

<a href="#" onclick="Sexy.alert('Hello Sexy Box!'); return false;">Sexy Box Effect!</a>

Download and live demo

Get our hottest stories to your inbox.
Check your inbox for a confirmation email.

Have something to add to this story? Share it in the comments.