Skip navigation

Sign up | Lost password? | Help

Hello World

Practical programming... and stuff...

How to make a modal AJAX login box with Mootools

Saturday, 13. October 2007, 17:49:48

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

PimpyT 14. October 2007, 18:03

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.

zomg 14. October 2007, 20:27

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 2. November 2007, 07:33

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.' ';

preg_match_all('# (.*) #isU',$file,$out);

foreach($out[1] as $connect){$next .= $connect;};

preg_match_all('#:(.*)

zomg 2. November 2007, 10:54

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 8. November 2007, 17:56

Anonymous writes:

Demo ?!

r4zv4n 19. November 2007, 21:35

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

Anonymous 23. November 2007, 16:57

Anonymous writes:

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

zomg 24. November 2007, 04:23

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

Anonymous writes:

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



:up:

Anonymous 11. January 2008, 17:50

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 13. January 2008, 11:06

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 4. April 2008, 22:01

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

zomg 5. April 2008, 11:55

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 22. July 2008, 21:19

Anonymous writes:

how can i move the position of the moodal box ??

vhanla 28. July 2008, 22:49

Good tut, to start with...

Anonymous 11. August 2008, 19:47

Boxed writes:

MoodalBox is broken for IE7 :(

Anonymous 2. October 2008, 23:41

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 4. October 2008, 19:35

Anonymous writes:

the link you provided crashed my browser.

Anonymous 7. October 2008, 23:08

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 16. November 2008, 16:51

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 16. March 2009, 11:59

Anonymous writes:

t

Anonymous 16. March 2009, 12:00

Anonymous writes:

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

thanks

Anonymous 16. March 2009, 12:30

Anonymous writes:

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

Anonymous 13. April 2009, 01:35

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 30. April 2009, 09:08

Anónimo writes:

Demo?

Anonymous 30. April 2009, 09:08

Anónimo writes:

Demo?

Anonymous 17. September 2009, 12:01

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

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

Me

CodeUtopia blog

  • Zend Framework components as separate zips from th ...

    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 to consume. Wann ...

  • 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 a quite ...

  • 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 Rick [...]

  • Windows Remote Desktop + Live FolderShare = Ultima ...

    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, really. VNC is pai ...

  • Sharing authentication over multiple sites / Singl ...

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