|
|
|
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 */
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
|
