How to make a modal AJAX login box with Mootools
October 13, 2007 – 9:49 am Tags: JavaScriptOriginally 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?
Subscribe to my RSS feed
4 Responses to “How to make a modal AJAX login box with Mootools”
I was wondering how to click on a link that says you are going to an external site with a dialog that lets you do that or cancel. How do I pass the link to the external site to the dialog box and then forward the page?
By Ed Hertzog on Aug 14, 2008
When linking to the dialog, you could pass the external URL as a GET parameter.
By Jani Hartikainen on Aug 17, 2008
Now this some great info!!! Thanks a lot!
By Rikky on Oct 20, 2008
Problem IE7
Not formating login.html
By Angel Vachev on Jan 14, 2009