How to create a JavaScript floating div registration form

Question

I am creating a website with a "Login / Register" link on each page. Whenever someone clicks on this link, I want the JavaScript / div based registration form to float on top of the content with a link to “close” if they want.

I also want the div to appear next to their mouse position, i.e. if they click the link near the middle of the page, it should appear near the middle, and they don’t have to scroll all the way to the top to see this. (To clarify, maybe he should automatically determine the coordinates of the mouse or have a way to specify the coordinates (x, y).)

I am a good JavaScript developer, but not an expert, so I'm sure some libraries will do this better than I can. Any links / tutorials to publish?

Answer 1

Take a look at jQuery Thickbox.

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

Answer 2

Today there is a much better approach. He called up the jQuery dialog: http://jqueryui.com/demos/dialog/

Take a look at the model form sample: http://jqueryui.com/demos/dialog/#modal-form

Answer 3

:

<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 />

, .

Answer 4

Thickbox, , div, . Ibox, :)

Answer 5

You can also show the login page in a new window with a hidden toolbar, address bar, etc. You can set the window location using the mouse coordinates obtained from the mouse click event on the main page.