Chris is quite correct.
To elaborate, the idea is that you have a hidden-by-default div that will be toggled visible/hidden when something is clicked.
Most of the work is going to be the HTML+CSS design. Put it where you want it to appear and make it look how you want it to look.
Then, set the CSS of that element to
display: none;.
Here comes the javascript. We're going to use
jQuery's show/hide methods. Check out the link, it leads to the API documentation of the show method. The second example shows both .show and .hide being used as how you intend to use it.
What you need to do is just have a way for the .show and .hide methods to be invoked, i.e. have a link/button somewhere, and you should be fine.
Now, the overlay. The CSS/HTML is pretty straight forward. If you inspect the CSS of their overlay, it's pretty routine.
Code:
style="position: absolute; top: 0px; left: 0px; width: 1903px; height: 2310px; display: block; opacity: 0.6; z-index: 9998; background-color: rgb(255, 255, 255);"
That's the CSS they use, although I would personally set the position to fixed and just use a width and height of 100%, which would work fine as well. Remember though, the div with this CSS will be the overlay div. So make sure it doesn't cover the div that is being shown with the jQuery .show method.
Bukkit invokes the .hide method when the overlay is clicked, which explains why clicking on the forums will get rid of both the overlay and the login box.
Oh, and you'll want to keep the overlay div hidden until the login/whatever div is shown. So when your login div is shown, you'll want to simultaneously show the overlay div. When the login div is hidden, you'll also want to simultaneously hide your overlay div. Simple enough...
$('#login').hide(); $('#overlay').hide();
I hope this helped.
