This is very simple
JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on ...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes How to setup Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
#box {
margin-bottom:10px;
width: auto;
padding:4px;
border:solid 1px #DEDEDE;
background: #FFFFCC;
display:none;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// Created by Antonio Lupetti | http://woork.blogspot.com
// This script downloaded from www.JavaScriptBank.com
window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');
/* AJAX Request here... */
fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity': 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0001, this, {'opacity': 1});
});
});
});
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
Press "Save"</p>
<div id="box"></div>
<input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>
Step 4: Download files below
Files
mootools.js 
Nice AJAX Effects for Messages Box using MooTools 
Linear Mode
