Les fonctions - alert(), prompt(), confirm() - affichent une fenêtre très austère (pas de couleurs de fond, ni pour le texte, pas de liens, ...). De plus, les boutons ne peuvent pas être personnalisés (impossible de remplacer OK/Annuler par Oui/Non, ...).
Il faut alors coder davantage ...
Pour simplifier le code, on liera - dans le code HTML - la page appelante à deux fichiers : w3.js et w3.css. Et, le code supplémentaire sera placé dans le code HTML de la page appelante (dans une zone qui rassemblera le code de toutes les fenêtres modales).
Chaque fenêtre modale sera codée à l'intérieur d'une div ayant un id. La
modale sera affichée et cachée par l'appel de la fonction w3.show('#id')
ou w3.hide('#id') où l'id correspond à celui de la modale.
La modale utilisera la classe w3-modal
Qui dit modale, dit fermeture de cette modale.
Soit, via du code CSS pour une croix de fermeture : modales.css
.btnModalClose {
position: absolute;
top: -5px;
right: 10px;
color: red;
font-size: 40px;
font-weight: bold;
}
.btnModalClose:hover,
.btnModalClose:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
Soit, via un bouton "Fermer" (dans le code HTML)
Soit, via une croix de fermeture ET un bouton "Fermer"
alert()
<button onclick="alert('Alerte standard');">alert() standard</button>
<button onclick="w3.show('#alerte')">Alerte personnalisée avec w3.js</button>
Code HTML de la modale :
<div id="alerte" class="w3-modal" style="max-width:100vw">
<div class="w3-modal-content">
<div class="w3-container w3-teal">
<span onclick="w3.hide('#alerte')" class="btnModalClose">×</span>
<p>Titre personnalisé</p>
</div>
<div class="w3-container w3-khaki">
<p>Cette fenêtre peut être fermée en cliquant sur le bouton Fermer (au lieu du bouton
"OK"). De plus, elle peut aussi être fermée via la croix de fermeture (en haut à
droite).</p>
</div>
<div class="w3-bar w3-gray">
<span class="w3-bar-item w3-button w3-right w3-indigo w3-hover-aqua"
onclick="w3.hide('#alerte')">Fermer</span>
</div>
</div>
</div>
Une modale textuelle est généralement divisée en trois parties (div) :
- un titre (qui contient la croix de fermeture à droite)
- le corps
- le bas qui contient des boutons
Le code style="max-width:100vw;" permet à la modale de prendre
(et griser) toute largeur de la fenêtre
Idéalement, le titre et le corps devraient être gérés via du code JS.
Voici le code HTML optimisé : (à placer en bas de page)
<!-- Modales -->
<div id="alerte" class="w3-modal">
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-container w3-teal">
<span onclick="w3.hide('#alerte')" class="btnModalClose">×</span>
<p id="alertTitre"></p>
</div>
<div class="w3-container w3-khaki">
<p id="alertMsg" style="overflow-wrap: anywhere;"></p>
</div>
<div class="w3-bar w3-gray">
<span class="w3-bar-item w3-button w3-right w3-indigo w3-hover-aqua"
onclick="w3.hide('#alerte')">Fermer</span>
</div>
</div>
</div>
Voici un exemple de code JS :
if (isNaN(distance)){
document.getElementById("alertTitre").innerHTML = "Distance manquante !"
document.getElementById("alertMsg").innerHTML = "Veuillez indiquer une distance."
w3.show("#alerte"); return
}
Les codes ci-dessus requierent : w3P.js, w3P.css et modales.css.
Si l'application web est susceptible de lancer plusieurs alertes, pour alléger le code JS, on peut créer une fonction :
function info(titre,msg){
document.getElementById("alertTitre").innerHTML = titre
document.getElementById("alertMsg").innerHTML = msg
w3.show("#alerte") /*; navigator.clipboard.writeText(msg) */
}
Si le message de l'alerte est un résultat, il peut être copié dans le presse-papier.
prompt()
prompt() retourne une string.
Edge (2019) ne tient pas compte de certains attributs tel que type="number", min,
max, ...
<div id="inputText1" class="w3-modal" style="max-width:100vw;">
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-container w3-teal">
<span onclick="w3.hide('#inputText1')" class="btnModalClose">×</span>
<p>
Titre personnalisé
</p>
</div>
<div class="w3-container w3-khaki">
<p>
Quel est votre âge ? <input id="age1" type="number" min="1" max="120" /> ans
</p>
<p class="note">
Contrairement au prompt(), une modale permet de demander plusieurs informations
</p>
<p>
Quel est votre prénom ? <input id="prenom1" type="text" maxlength="30" />
</p>
<p class="note">
Ici, la valeur de ce champ (prénom) n'est pas pris en compte.
</p>
</div>
<div class="w3-bar w3-gray">
<span class="w3-bar-item w3-button w3-hover-aqua" onclick=
"afficher1('');w3.hide('#inputText1');">Annuler</span> <span class=
"w3-bar-item w3-right w3-button w3-indigo w3-hover-aqua" onclick=
"afficher1(document.getElementById('age1').value);w3.hide('#inputText1');">Envoyer ma
réponse</span>
</div>
</div>
</div>
confirm()
Texte modal
Une fenêtre modale permet aussi de recueillir plusieurs données (comme dans un formulaire). De plus, elle donne un look professionnel.
Ce look peut encore être amélioré par un effet zoom, si le fichier fait appel à w3.css :
<div id="myModal" class="w3-modal" style="display:none">
<div class="w3-display-container w3-animate-zoom">
...
Image modale
Il est possible d'afficher une image agrandie dans une modale.
Pour indiquer qu'on peut cliquer cette image, on utilise une opacité
différente lors du son survol par la souris :
w3-hover-opacity. On modifie également la représentation de la souris :
style="cursor: pointer"
<figure>
<img src="modalesImg.webp" alt="" onclick="w3.show('#imgModal')" width="300" height="200"
class="w3-hover-opacity w3-round-xxlarge" style="cursor: pointer" />
<figcaption>Image 1</figcaption>
</figure>
onclick="w3.show('#imgModal')" : l'image réduite
est liée à l'attribut onclick qui appelle la fonction
w3.show() de la librairie w3.js, ayant comme paramètre le sélecteur ID
de la modale qui contiendra l'image agrandie.
Code de la modale :
<div id="imgModal" class="w3-modal" style="display:none">
<div class="w3-display-container w3-animate-zoom">
<span onclick="w3.hide('#imgModal')" class="btnModalClose">×</span>
<img src="modalesImg2.webp" alt="" style="width:100%" />
</div>
</div>
Avec le code style="width:100%", l'image prend toute la largeur
de son conteneur (en pratique, toute la largeur de la fenêtre)
Plus d'info : w3schools.com
