Comment créer un JavaScript flottant div formulaire d'inscription

Question

Je construis un site qui aura un lien « Connexion/» sur chaque page. Chaque fois que quelqu'un clique sur ce lien, je veux qu'un formulaire d'inscription basé sur JavaScript/div flotte sur le contenu avec un lien pour le "fermer" s'il le souhaite. Je veux aussi que la capacité de la div apparaisse près de la position de sa souris, c'est-à-dire si elle clique sur le lien près du milieu de la page elle devrait apparaître près du milieu, et elle ne doit pas défiler tout le chemin vers le haut pour le voir. (Pour clarifier, peut-être devrait déterminer automatiquement les coordonnées de la souris ou avoir un moyen de spécifier les coordonnées (x, y).)

Je suis un bon développeur JavaScript moi-même, mais pas un expert, donc je suis sûr il y aura des bibliothèques qui feront mieux que moi. Des liens/tutoriels à partager?

Answer 1

Jetez un oeil à jQuery Thickbox.

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

Answer 2

Vous pouvez aussi éventuellement afficher la page de connexion dans une nouvelle fenêtre avec la barre d'outils, la barre d'adresse, etc caché. Vous pouvez définir l'emplacement de la fenêtre en utilisant les coordonnées de la souris extraites de l'événement click de souris dans votre page principale

Answer 3

Vous pouvez essayer ceci:

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

Cela devrait fonctionner si vous avez juste besoin d'une solution simple.

Answer 4

J'ai essayé Thickbox mais il a toujours montré une case vide plutôt que le contenu de la div que je voulais afficher. Donc, j'ai trouvé Ibox et cela a fonctionné très bien :)

Answer 5

Aujourd'hui, il y a une approche beaucoup mieux. Il est appelé dialogue jQuery: http://jqueryui.com/demos/dialog/

Jetez un oeil à l'échantillon de formulaire type: http://jqueryui.com/demos/dialog/#modal-form