How to make a modal AJAX login box with Mootools

Tags:

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?

It's basically what you can do in JavaScript with alert() but with different functionality: If you do alert('foo'), you get a box with text “foo” that you must close before doing anything else. This kind of dialogs are called modal dialogs.

In this post I'll show you how to make a modal login box that can work nicely even in browsers without proper JavaScript support. This is quite easy with the proper tools.

For this article, you will just need to know some HTML and JavaScript.

For this script, I decided to use Mootools. Mootools is a lightweight JavaScript library, similar to Scriptaculous and Prototype. The reason I chose Mootools over my usual tool Scriptaculous is that I wanted to experiment with other libraries as well.

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.

Start!

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.

<html>
 <head>
  <title>MOOdalbox example</title>
  <link rel="stylesheet" type="text/css" href="css/moodalbox.css" />
  <script type="text/javascript" src="js/mootools.js"></script>
  <script type="text/javascript" src="js/moodalbox.js"></script>
 </head>
 <body>
 
  This page will link to the login page<br />
 
  <a href="login.html">Log in</a>
 
 </body>
</html>

This does not use any JavaScript yet, but we will get to that part soon. Now, let's create the login box code.

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

And save that as login.html. We won't add the html and other tags to this one because it will be included with AJAX to the main page, but if it's like this, we can also use it with a browser that does not have JavaScript.

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.

Easy, huh?