How to achieve this javascript effect?

Question

On this website: when the user clicks "register now" along the top bar the screen goes dim and a box appears offering the registration form with recaptcha. I have a registration form with recaptcha working on my site and would like to copy the effect seen above.

Can anyone link me to a specific tutorial offering instructions or alternatively provide me with the code?

I am a novice javascript programmer.

Thanks if you can help me.

Answer 1

Take a look at jQuery effects, in case you haven't heard of jQuery before, here is a good introduction.

$('#register').click(function() {
  $('#topBar').fadeOut('slow', function() {
    // Some Code
  });
});

Answer 2

The effect you are talking about is generally described as a "lightbox" - based on one of the earliest implementations (from what I remember). Check out this page on wikipedia and look about - the modal dialog implementation might be what you're talking about.

I'm pretty sure some of the standard frameworks like jQuery and MooTools implement this (directly or via plugins).

Answer 3

There's couple of good plugins for that. If you use jQuery you can check Thickbox and even jQuery UI Dialog should probably be enough for what you want.