Pour ajouter une fenêtre d'informations, il faut :
- ajouter un bouton d'ouverture
- prévoir une fenêtre (lightbox) , masquée par défaut.
- éventuellement, prévoir un voile sombre (darkbox), masqué par défaut : il permet de focaliser l'attention sur la lightbox, et évite que l'utilisateur n'intergisse par mégarde avec les autres fonctions de l'applications.
- Dans la fenêtre (lightbox) ne pas oublier le bouton de fermeture.
Dans le fichier HTML
Le HTML est la partie structurelle de l'application. Elle se trouve généralement dans index.html.
On place le bouton d'ouverture
<button id="bouton-aide" onclick="ouvre(divAide)"></button>
Soit à l'intérieur d'une "div" existante (contenant déjà d'autres boutons, par exemple), soit juste avant la balise fermant le "body" en fin de document, si l'on préfère un placement indépendant (absolu).
On place éventuellement la darkbox
<div id="darkbox" class="hide"></div>
On lui donne la classe "hide" (on déclarera plus loin que hide = masqué).
On place la lightbox
On lui affecte également une classe "hide" comme la darkbox.
L'exmple ci-dessous est structuré pour présenter :
- un titre
- un bouton de fermeture
- le contenu de la lighbox Ce contenu est lui-même structuré en sous-titres (h2). Les éléments de liste sont entre balises "li"
<div id="aide" class="lightbox hide">
<button class="bouton-fermer" onclick="ferme(divAide)"></button>
<h1>Aide</h1> <!-- Le titre -->
<div class="contenu-lightbox"> <!-- Le contenu -->
<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphecontenant <a target="_blank" href="https://forge.aeif.fr/">un lien</a>, observez comment il est structuré.</p>
<h2>Ceci est un sous-titre</h2>
<ul> <!-- Début d'une zone de liste-->
<li>Élément de liste</li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul> <!-- Fin d'une zone de liste-->
<h2>Encoure un un sous-titre</h2>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe <strong>avec des mots en gras</trong>.</p>
</div>Dans le javascript
Le javascript est la partie algorithmique de l'application, elle se trouve dans un fichier à l'extension js (souvent script.js ou main.js). Son but est d'effectuer des modifications dynamiques du HTML.
On va ajouter quelques lignes au début du fichier :
// À mettre en début de script
const darkbox = document.getElementById('darkbox');
const divAide = document.getElementById('aide');
// À mettre où on veut
function ouvre(div){
div.classList.remove('hide');
darkbox.classList.remove('hide');
}
function ferme(div){
div.classList.add('hide');
darkbox.classList.add('hide');
}Ces fonctions sont appelées par les boutons qu'on a placés dans le HTML, via l'attribut "onclick". Elles affectent ou désaffectent la classe "hide" aux éléments qu'on veut afficher ou masquer.
Le CSS
C'est la partie "décoration". On va ajouter des règles, soit pour un objet en particulier #objetparticulier soit pour une classe d'objets : .classedobjets. L'exemple ci-desous produit :
- une darkbox noire à 50% d'opacité
- une lighbox de largeur et hauteur 50%, centrée verticalement et horizontalement
- le bouton d'ouverture positionné en absolu dans le coin en bas à droite Vous pouvez adapter les règles d'affichage selon vos besoins.
À penser !
- Cet exemple appelle images/question.svg et images/bouton_fermer.svg . Pour que cela fonctionne il faut donc avoir un sous-dossier nommé images avec deux images ainsi nommées à l'intérieur.
- Vérifiez dans la feuille de style qu'il n'y a pas déjà des sélecteurs utilisant ces noms (comme #bouton-aide, #darkbox etc. , les sélecteurs précèdent toujours une accolade ouvrante).
- Pour adapter le style vous pouvez modifier, ajoute ou supprimer des propriétés. Gardez bien toujours le ; en fin de ligne.
#bouton-aide {
position: fixed; /* permet que la position ne soit pas affectée par le scroll de la page */
z-index: 100; /* Pour être à peu près sûr de passer au premier plan */
/* Les dimensions; la position, l'apparrence ... */
bottom: 20px;
right: 20px;
width: 80px;
height: 80px;
background-image: url(images/question.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
border-radius: 10px;
}
#darkbox {
/* Elle doit prendre toute la largeur et toute la hauteyr */
position: fixed;
z-index: 999; /* O la place sous la lightbox */
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.5);
}
.lightbox {
position: fixed;
z-index: 1000; /* O la place sur la lightbox */
display: flex;
flex-direction: column;
width: 60%;
height: 60%;
top: 50%;
left: 50%;
padding: 10px; /* Marge intérieure */
border-radius: 20px; /* Coins arrondis */
box-shadow: 0px 0px 15px #ffffff; /* Ombre transparente blanche */
border: 2px solid #000000; /* Bordure de 2px noire */
transform: translateX(-50%) translateY(-50%); /* Pour centrer dans la page */
background-color: #ffffff; /* Couleur de fond */
}
.lightbox h1 { /* Le titre */
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
min-height: 36px;
margin: 10px;
}
.contenu-lightbox {
flex: 1;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
overflow-y: auto;
text-align: left;
width: fit-content;
margin: auto;
}
.bouton-fermer {
position : fixed;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-image: url(images/bouton_fermer.svg);
background-size: contain;
background-color: transparent;
border: none;
outline: none;
}
.hide {
display: none !important; /* Les objets de classe hide sont masqués */
}