Originally posted in my old blog at My Opera
Sometimes I've been asked to do a modal AJAX login box for a website. What is that you ask?
We could use Mootools itself to create our dialog box, but we can make it even easier for us by using MOOdalbox. MOOdalbox is a script for making nice modal dialog boxes and it's based on Mootools.
First, you need to download MOOdalbox. The archive comes with both MOOdalbox and Mootools, so you won't need to download them separately. Just unzip the files to where you will be putting the rest of your files related to this.
Next, let's make a simple HTML page with a link to our login page, and the login form.
Laying out the HTML
We need some page to act as the “portal” to our login area, so let's make a simple page with a link to it. We need to remember ot include the MOOdalbox scripts and styles to it, too.
<form action="login.php" method="post"> Login <input type="text" name="login" /><br /> Pass <input type="password" name="pass" /><br /> <input type="submit" value="Log in" /> </form>
Now you have a login function on your page. I won't go into details of setting up the actual log in procedure, just how to make the modal box.
Adding the magic
So how do we go about making our login box appear like an alert box?
Simple! We add a rel attribute to the link, like this:
<a href="login.html" rel="moodalbox">Log in</a>
If you click your Log in link now, you get a nice modal dialog which displays login.html.