Bonjour à tous !
Je développe une interface web en HTML5, et pour afficher l'aide sur les différents champs à remplir j'aimerai "innover". Au lieu d'abuser des titles, j'aimerai recouvrir les inputs présents par l'aide.
J'ai une div qui contient mes inputs. Au clic du bouton aide, j'aimerai que cette div soit recouverte d'une nouvelle div noire transparente à 0.2, sur laquelle est écrit l'aide pour les inputs que l'on voit en transparence. Je me suis bien expliqué ?
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <div class="module_content"> <input type="text" name="experiment_title" placeholder="Enter an explicit name for your study" required size="60" /> <input type="text" id="realisation_date" name="realisation_date" class="datepicker" placeholder="Realisation date" required /> <div class="clear"></div> <label>Project:</label> <select><option>select the project</option><option>project1</option><option>project2</option></select> <label>Description:</label><textarea name="experiment_desc" rows="6" cols="60" ></textarea> <div class="clear"></div> </div>
J'utilise du JQuery. Je pensais récupérer à l'aide de JQuery les dimensions de la div au clic sur le bouton help. Créer une div avec comme style pour le fond du noir avec de la transparence et la placer au même endroit que la div class="module_content"
Quelles sont les fonctions qui peuvent m'aider ? A quoi je dois faire attention (compatibilité IE9/FF4 min) ? Existe-t-il un plugin jquery ? Comment appelez vous ce moyen pour faciliter mes recherches ?
Merci à ceux qui prendront le temps de me répondre!
Bonne journée.
Partager