Apparition d'une fenetre de saisie avec jquery.

Comment faire apparaître un formulaire de saisie avec un effet de fadeIn en utilisant JQuery ?

31 octobre 2010

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

Les éléments dont nous aurons besoin :

  • JQuery déjà inclut sur la page.
  • Un formulaire.
  • Un cadre dans lequel mettre le formulaire.
  • Un évènement qui déclenche l'affichage.
  • Un évènement qui déclenche la fermeture.
  • Un peu de CSS.

Un champ de saisie

<input type="text" value="Coucou ça marche"/>

On entoure le formulaire par le cadre. Le style inline est présent pour l'exemple, il vaut mieux le mettre dans une CSS séparée.

Un block invisible positionné en haut à gauche de l'écran

<div id="exemple_fadein" style="background:gray;padding:20px;display:none;z-index:10001;position:absolute;top:0;left:0;height:500px;width:500px;">
        <input type="text" value="Coucou ça marche"/>
</div>

Pour faire apparaître le cadre nous allons utiliser la méthode "fadeIn" de JQuery. Il faut créer un bouton qui fera appel à cette méthode lors d'un clic. Le clic 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...

Le bouton qui déclenche fadeIn

<button type="button" onclick="$('#exemple_fadein').fadeIn();">Afficher la fenêtre</button>

<div id="exemple_fadein" style="background:gray;padding:20px;display:none;z-index:10001;position:absolute;top:0;left:0;height:500px;width:500px;">
        <input type="text" value="Coucou ça marche"/>
</div>

Pour fermer la fenêtre, c'est exactement la même chose avec la méthode "fadeOut".

Le bouton qui déclenche fadeOut

<button type="button" onclick="$('#exemple_fadein').fadeIn();">Afficher la fenêtre</button>

<div id="exemple_fadein" style="background:gray;padding:20px;display:none;z-index:10001;position:absolute;top:0;left:0;height:500px;width:500px;">
        <input type="text" value="Coucou ça marche"/>
        <br/><br/>
        <button type="button" onclick="$('#exemple_fadein').fadeOut();">Fermer cette fenêtre<button>
</div>

A bientôt !

Par
Créateur et administrateur.

Dans la même catégorie

Ecrire une extension pour Google Chrome
JSONP : envoyer des requêtes cross-domains
Chargement asynchrone d'images en javascript
Le principe de l'AJAX
Mise en place d'un calendrier comprenant date et heure.
Utiliser l'objet Date de javascript pour effectuer des calculs sur les dates

Commentaire(s)