Apparition d'une fenetre de saisie avec jquery.

Le but du tutoriel est d'arriver à ce résultat :

Sachez jeunes gaulois que les pop-up sont le pire cauchemar des visiteurs, donc autant les éviter surtout que nous avons de nos jours des solutions beaucoup plus élégantes. Attention je n'ai jamais dit que les pop-up étaient inutiles et que ma solution est meilleure dans tous les cas, prenez en compte par exemple le cas ou le Javascript est désactivé chez votre visiteur .

De quoi avons nous besoin :

• JQuery déjà inclut sur votre page
• Un formulaire
• Un cadre dans lequel mettre le formulaire
• Une fonction d'affichage du cadre qui le centre en même temps
• Un évènement qui déclenche l'affichage
• Un évènement qui déclenche de masquage
• Un peu de CSS

	<input type="text" value="It rocks !"/>

On entoure le formulaire par un cadre auquel on ajoute quelques propriétés CSS pour faire joli mais surtout il ne faut pas oublier celles qui servent à faire "ressortir" le cadre du reste de la page : "display:none; z-index:10001; position: absolute; height: 500px; width: 500px;".

<div id="exemple_fadein" style="display:none; z-index:10001; position: absolute; height: 500px; width: 500px;"> 
	<input type="text" value="It rocks !"/>
</div>

Il faut maintenant afficher notre cadre. Pour cela il faut déjà sélectionner le cadre via son ID UNIQUE, puis le faire apparaître via la méthode fadeIn() de JQuery. On créé donc un bouton qui aura pour seul but de faire appel à cette méthode lors d'un évènement clic. Ceci est un exemple d'évènement, vous pouvez très bien choisir de lancer fadeIn() lors du survol d'une image et bien d'autres...

<input type="button" value="Joli bouton" onclick="$('#exemple_fadein').fadeIn();"/>

<div id="exemple_fadein" style="display:none; z-index:10001; position: absolute; height: 500px; width: 500px;"> 
	<input type="text" value="It rocks !"/>
</div>

Reste plus qu'à pouvoir refermer le cadre. Si vous avez suivi l'étape précédente, rien de plus facile : c'est la même chose sauf que l'on utilise la méthode fadeOut(). Je recréé donc un bouton qui cette fois déclenchera, lors d'un clic, un appel à la méthode fadeOut() sur le noeud exemple_fadein.

<input type="button" value="Joli bouton" onclick="$('#exemple_fadein').fadeIn();"/>

<div id="exemple_fadein" style="display:none; z-index:10001; position: absolute; height: 500px; width: 500px;"> 
	<input type="text" value="It rocks !"/>
	<br/><br/> 
	<input type="button" value="Fermer cette fenetre" onclick="$('#exemple_fadein').fadeOut();" />
</div>