How to create a javascript floating div signup form

Question

Hi,

I'm building a site which will have a 'Login/Register' link on every page. Whenever someone clicks this link, I want a javascript/div based signup form to float ontop of the content with a link to 'close' it if they want.

I also want the capability of the div showing up near the position of their mouse, i.e so if they click the link near the middle of the page it should show up near the middle, and they don't have to scroll all the way to the top to see it. (To clarify, may be it should automatically determine the moust coordinates or have a way to specify the x y coordinates)

I'm a good javascript developer myself, but not an expert so I'm sure there will be some libraries doing this better than I can.

Any links/tutorials to share?

Thanks.

Answer 1

Take a look at jQuery Thickbox.

http://jquery.com/demo/thickbox/

Answer 2

Try jQuery.

Answer 3

You can also possibly show the login page in a new window with the toolbar, address bar etc hidden. You can set the window location using the mouse co-ordinates retrieved from the mouse click event in your main page

Answer 4

You could try this:

<div id="loginBox"><!-- insert content here--></div><br />
<style type="text/css"><br />
   #loginBox { <br/>
        display:none; <br/>
        position:absolute; <br/>
        /* left and top */<br/>
   }<br/>
</style><br/>
<script type="text/javascript"><br/>
   function showLoginBox() { document.getElementById('loginBox').style.display = 'block'; }<br/>
</script><br/>
<a href="#" onclick="showLoginBox()" >Show login box</a><br />

That should work if you just need a simple solution.

Answer 5

I tried Thickbox but it always showed an empty box rather than the content of the div I wanted to display. So I found Ibox and it worked nicely :)

Answer 6

One example with mootools is here: Overlay control using mootools