Mode W3.CSS
Un modal est une boîte de dialogue/fenêtre contextuelle qui s'affiche en haut de la page actuelle :
Classes modales W3.CSS
W3.CSS fournit les classes suivantes pour les fenêtres modales :
| Classer | Définit |
|---|---|
| w3-modal | Le conteneur modal |
| w3-modal-contenu | Le contenu modal |
Créer un modal
La classe w3-modal définit un conteneur pour un modal.
La classe w3-modal-content définit le contenu modal.
Le contenu modal peut être n'importe quel élément HTML (divs, titres, paragraphes, images, etc.).
Exemple
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
Ouvrir un modal
Utilisez n'importe quel élément HTML pour ouvrir le modal. Cependant, il s'agit souvent d'un bouton ou d'un lien.
Ajoutez l' attribut onclick et pointez sur l'id du modal ( id01 dans notre exemple), en utilisant la méthode document.getElementById().
Fermer un modal
Pour fermer un modal, ajoutez la classe w3-button à un élément avec un attribut onclick qui pointe vers l'id du modal ( id01 ). Vous pouvez également le fermer en cliquant en dehors du modal (voir exemple ci-dessous).
Astuce : × ; est l'entité HTML préférée pour les icônes de fermeture, plutôt que la lettre "x".
En-tête et pied de page modaux
Utilisez les classes w3-container pour créer différentes sections dans le contenu modal :
Exemple
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
Modal comme une carte
Pour afficher le modal sous forme de carte, ajoutez l'une des classes w3-card-* au conteneur w3-modal-content :
Exemple
<div class="w3-modal-content w3-card-4">
Modaux animés
Utilisez l'une des classes w3-animate-zoom|top|bottom|right|left pour faire glisser le modal à partir d'une direction spécifique :
Exemple
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
Vous pouvez également fondre la couleur d'arrière-plan du modal en définissant la classe w3-animate-opacity sur l'élément w3-modal :
Exemple
<div class="w3-modal w3-animate-opacity">
Image modale
Cliquez sur l'image pour l'afficher sous forme de modal, en taille réelle :
Exemple
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
Galerie d'images modales
Cliquez sur une image pour l'afficher en taille réelle :
Exemple
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Formulaire de connexion modale
Cet exemple crée un modal pour la connexion :
Exemple
Modal avec contenu à onglets
Cet exemple crée un modal avec un contenu à onglets :
Exemple
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
Nature and sunrise
❮ ❯
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.