Jani - How to make a modal AJAX login box with Mootools

How to make a modal AJAX login box with Mootools

Saturday, October 13, 2007 5:49:48 PM

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?

Lively Kernel - Another waste of time?LAN party place reservation

Comments

Theo HubenetPimpyT # Sunday, October 14, 2007 6:03:23 PM

Very nice, working with mootools. I have heard so much positive words about it. Like Scriptaculous right? But hey, you said earlier that AJAX and DHTML are old news and javascript 1.this and 1.that, but what are you talking about, do you know what is possible now with javascript that wasn't possible 7+ years ago? I havn't seen any output yet that is new. If Firefox is considered to be a 'maatstaaf', I dunno what that is in english, but means something like a standard, then what javascript is so new? I think it is not any javascript that is new except for the xmlhttp object in firefox and the biggest step forward is offcourse the almost complete compliance with the Document Object Model by all browsers.

Janizomg # Sunday, October 14, 2007 8:27:34 PM

What is "new" is that the popular browsers now support all these features in a somewhat similar way, so it's no longer incredibly annoying to get something working the same way on all of them.

Anonymous # Friday, November 2, 2007 7:33:55 AM

Anonymous writes: 1, this tut sucked man, download moodalbox and how to make a form in html? 2, you security code ( excuse for a capthcha ) --> is really useless.. $file = file_get_contents('http://my.opera.com/zomg/blog/2007/10/13/how-to-make-a-modal-ajax-login-box-with-mootools'); //echo $file.'<hr>'; preg_match_all('#<span>(.*)</span>#isU',$file,$out); foreach($out[1] as $connect){$next .= $connect;}; preg_match_all('#:(.*)<#isU',$next,$outx); then just convert the random unicode chars to ascii... hope this isn't your code. that's just how to do it with php

Janizomg # Friday, November 2, 2007 10:54:40 AM

Well you go write a better tutorial/whatever then.

What comes to the security code, I don't think it's useless.

Whoever would want to bypass the code would have to know that they need to look for the span element. I don't think all spambots contain code to "look for a span, it contains the security code"

And no it's not mine. It's something which is shown automatically by My Opera if you're an anonymous commenter.

Anonymous # Thursday, November 8, 2007 5:56:48 PM

Anonymous writes: Demo ?!

Razvan Bratesr4zv4n # Monday, November 19, 2007 9:35:22 PM

Thanks for the well written tutorial, it will help a lot of people that aren't too JS / HTML literate. It is a beginner's tutorial and it's great for it's purpose.

I've mentioned your tutorial on the official MOOdalBox blog to bring more people to it.

More people should do what you did - i.e. write simple, bitesize tutorials, as a jumpoff point to a better knowledge of web design / development.

In the meantime, I'll set up a demo page on my web server and post back with a link

Anonymous # Friday, November 23, 2007 4:57:06 PM

Anonymous writes: anonymous user number 2 is stupid. ignore him it was a great tut thanx

Janizomg # Saturday, November 24, 2007 4:23:29 AM

r4zv4n: thanks, I should've upped a demo page myself but.. um... Let's just say I'm a bit lazy.

Anonymous writes:

anonymous user number 2 is stupid. ignore him it was a great tut thanx

Anonymous # Friday, January 11, 2008 5:50:01 PM

Roland writes: Any code on how to handle error in login. for example if one types the wrong username, upon submit, the error notice will not be in the moodalbox. the entire page is reloaded. thx

Anonymous # Sunday, January 13, 2008 11:06:12 AM

Anonymous writes: how could I show some google map in this nice MoodalBox? It loads a googlemap.html wthout any error but nothing is shown? Any idea therefor?

Anonymous # Friday, April 4, 2008 10:01:18 PM

steve harrision writes: This is an awesome tutorial.. I was just wondering if there was anyway to make the login box appear over flash .swf files? thanks

Janizomg # Saturday, April 5, 2008 11:55:08 AM

If I remember correctly, there is a problem that prevents that from happening. I thought the Moodalbox script fixed that by hiding all flash content, though. That's what you could try doing manually when opening the box.

Anonymous # Tuesday, July 22, 2008 9:19:29 PM

Anonymous writes: how can i move the position of the moodal box ??

Victor Alberto Gilvhanla # Monday, July 28, 2008 10:49:55 PM

Good tut, to start with...

Anonymous # Monday, August 11, 2008 7:47:43 PM

Boxed writes: MoodalBox is broken for IE7 :(

Anonymous # Thursday, October 2, 2008 11:41:27 PM

Anonymous writes: emm.. i got problen on do dis... it shows me this error.. (new Ajax(this.href, ajaxOptions)).request is not a function how to fix this?

Anonymous # Saturday, October 4, 2008 7:35:05 PM

Anonymous writes: the link you provided crashed my browser.

Anonymous # Tuesday, October 7, 2008 11:08:41 PM

willy writes: There's a different modal box version based on litebox, and it display google maps as well as flash content: http://www.dolem.com/lytebox/demo.php

Anonymous # Sunday, November 16, 2008 4:51:36 PM

Anonymous writes: I probably have the most dumbest question, but please forgive me since I am a complete nubie. I downloaded the files and installed them but when I click on the link it starts showing the loading window but then shows the html page full page and not in the popup. Do I need to have my hosting company do something?

Anonymous # Monday, March 16, 2009 11:59:58 AM

Anonymous writes: t

Anonymous # Monday, March 16, 2009 12:00:41 PM

Anonymous writes: the download link does not work, where can i download the .js and .ccc files?? thanks

Anonymous # Monday, March 16, 2009 12:30:30 PM

Anonymous writes: you have made all this but you can not even make a link work, what a load of crap..!

Anonymous # Monday, April 13, 2009 1:35:06 AM

Anonymous writes: Hi there, i have a question about the moodalbox... so using the login example, when the modal box pops up and i click on the login button, obviously the modal box will close and login the user. HOw do i make the parent page (the background page) refresh itself? thank u very much for ur help

Anonymous # Thursday, April 30, 2009 9:08:00 AM

Anónimo writes: Demo?

Anonymous # Thursday, April 30, 2009 9:08:44 AM

Anónimo writes: Demo?

Anonymous # Thursday, September 17, 2009 12:01:06 PM

Anonymous writes: dears: can any one tell me how can i make modal box appears at the page loading without needing to click a link thank u for your help

Anonymous # Wednesday, June 23, 2010 4:06:20 PM

Anonymous writes: Moodal Box Code is now hosted on Google code.

Write a comment

Blog search

Me

CodeUtopia blog

Zend Framework components as separate zips fro ...
Did you ever want to use just a single component from Zend Framework, but couldn’t figure out which files you needed? Well, here’s a solution: Zend Framework packageizer script! Just pick the class you want, and you’ll get it and all its dependencies in a nice zip file for you ...
Making a PDF generator class using Zend_Pdf
There are some expensive libraries that you can use to generate PDF files… but why bother with them, when there are good free alternatives like Zend_Pdf? In three steps, you can generate a fancy report: Create a PDF template Insert data to template with Zend_Pdf Profit $$$ Since this is ...
Let’s Rickroll MTV Europe Music Awards 2008!
Okay so this is totally off the usual topics I guess, but this is too awesome to let it fail! Rick Astley has somehow managed to get into MTV Europe’s Music Awards 2008 gala in the category Best Act Ever. I suspect /b/ had something to do with this, but… I urge everyone to vote for R ...
Windows Remote Desktop + Live FolderShare = Ul ...
I’m a frequent user of Windows’ remote desktop feature. It’s a stellar remote control solution: It’s incredibly fast, almost like sitting on the remote PC, and has features like bringing over the clipboard and even sounds from the controlled computer. Much better than VNC ...
Sharing authentication over multiple sites / S ...
At The Group, we’re developing some web applications that needed to use the same user database. The applications were originally being developed with separate login for each, but I decided it would be better to share the login code across them. I investigated some ways to achieve sharing a ...