W3.CSS Modal
Un modal est une / fenêtre boîte de dialogue qui apparaît en haut de la page en cours:
Comment créer un Modal
Exemple
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> Try It Yourself » La classe "w3-modal"
Un modal peut être tout conteneur HTML (comme un <div>) avec class = "w3-modal".
Le "w3-modal-content" Classe
Tout le contenu modal doit être placé dans un conteneur HTML avec class = "w3-modal-content".
contenu Modal peut être tout élément HTML (titres, paragraphes, images, etc.)
Ouvrez un Modal
Utilisez tout élément HTML pour ouvrir le modal. Ce qui est souvent un bouton ou un lien.
Ajoutez l'attribut onclick et le point à l'id du modal (ID01 dans notre exemple), en utilisant la méthode document.getElementById () et spécifier un identifiant unique qui correspond à la touche "trigger" (de ID01).
Fermeture d' un Modal
Pour fermer un modal, ajouter la classe w3-CloseBtn à un élément avec un attribut onclick qui pointe vers l'id du modal (ID01). Vous pouvez également fermer en cliquant sur l'extérieur de la modale (voir exemple ci-dessous).
 | &fois; (X) est une entité HTML qui est l'icône préférée pour fermer les boutons, plutôt que la lettre «x». |
|---|
Modal En-tête et pied de page
A l' intérieur des <div> class = "-modal contenu w3", classes utilisation w3-conteneurs pour créer différentes sections dans le 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-closebtn">×</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> Try It Yourself » Modal Comme une carte
Pour afficher le modal comme une carte, ajouter le w3-card- * classe pour le conteneur de w3-modal-contenu:
Modals animés
Utilisez l' une des w3-animé-zoom | haut | bas | droite | gauche des classes à glisser dans le modal 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">
Try It Yourself » Vous pouvez également disparaître dans la couleur de fond de la modale (w3-modal):
Modal image
Cliquez sur l'image pour l'afficher en plein écran:
Exemple
<img src="img_fjords.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_fjords.jpg">
</div>
Try It Yourself » Modal Galerie d'images
Cliquez sur une image pour l'afficher en plein écran:
Exemple
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.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>
Try It Yourself » Modal Login Form
Cet exemple crée un modal pour la connexion:
Modal Tab
Cet exemple crée un modal avec un contenu onglets:
Fermez le Modal
Dans les exemples ci-dessus, nous utilisons un bouton pour fermer la modale. Cependant, avec un peu de JavaScript, vous pouvez également fermer le modal en cliquant en dehors de la boîte modale:
Exemple
// 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";
}
}
Try It Yourself »