Lightbox js sur un formulaire

Bonsoir,

j'aimerais savoir ce qu'utilise ce grand site de paris en ligne lorsqu'on clique sur login en haut à droite pour afficher le petit formulaire d'authentification :

https://www.bwin.fr/default.aspx?=

j'aimerais reproduire cet effet.

Je connais et je me sers des lightbox jquery pour les images, mais là je ne pense pas qu'on utilise le même script. Il faut qu'on puisse avoir la zone du formulaire de login qui reste "traitable" et tout le reste doit être incliquable.

Le seul effet, c'est que l'assombrissement de l'arrière plan se fait progressivement.

J'ai essayé en jouant sur les opacity. Ca marche mais c'est très superficiel : pas d'assombrissement progressif, il se fait d'un coup, et on peut encore cliquer derrière sur le menu par exemple. Et moi je voudrais le verrouiller.

Existe-t-il une bibliothèque pour cet effet, est ce qu'il suffit de jouer sur opacity?

Merci.

Citation:

---

Envoyé par Marc22

Bonsoir,

j'aimerais savoir ce qu'utilise ce grand site de paris en ligne lorsqu'on clique sur login en haut à droite pour afficher le petit formulaire d'authentification :

https://www.bwin.fr/default.aspx?=

j'aimerais reproduire cet effet.

Je connais et je me sers des lightbox jquery pour les images, mais là je ne pense pas qu'on utilise le même script. Il faut qu'on puisse avoir la zone du formulaire de login qui reste "traitable" et tout le reste doit être incliquable.

Le seul effet, c'est que l'assombrissement de l'arrière plan se fait progressivement.

J'ai essayé en jouant sur les opacity. Ca marche mais c'est très superficiel : pas d'assombrissement progressif, il se fait d'un coup, et on peut encore cliquer derrière sur le menu par exemple. Et moi je voudrais le verrouiller.

Existe-t-il une bibliothèque pour cet effet, est ce qu'il suffit de jouer sur opacity?

Merci.

---

Pour l'assombrissement, tu mets juste un div noir qui prend tout l'écran au dessus du reste (et en dessous de ta zone de login) ensuite c'est effectivement oppacity qui joue, et pour le progressif si tu utilises jQuery, regarde la fonction .animate()

Merci beaucoup ;)

Pour le div c'est ce que j'avais fait, mais pour l'animation, ton lien a fait toute la différence. Bonne nuit. ;)