Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:modal
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.
Lapseudo-classeCSS:modal cible un élément qui est dans un état interdisant toute interaction avec les autres éléments situés en dehors jusqu'à ce que l'interaction soit terminée. Plusieurs éléments peuvent être ciblés par la pseudo-classe:modal à un même instant donné, mais un seul de ces éléments sera actif et permettra de recevoir une saisie.
Exemple interactif
button { display: block; margin: auto; width: 12rem; height: 2rem;}:modal { background-color: beige; border: 2px solid burlywood; border-radius: 5px;}p { color: black;}<p>Souhaitez-vous voir un nouveau nombre aléatoire ?</p><button>Montre-moi</button><dialog> <form method="dialog"> <p>Le nombre chanceux est : <strong></strong></p> <button>Fermer la boîte de dialogue</button> </form></dialog>const showNumber = document.getElementById("showNumber");const favDialog = document.getElementById("favDialog");const number = document.getElementById("number");showNumber.addEventListener("click", () => { number.innerText = Math.floor(Math.random() * 1000); favDialog.showModal();});Syntaxe
:modal { /* ... */}Notes d'utilisation
Voici des exemples d'éléments qui peuvent empêcher une interaction avec le reste de la page et qui pourront être ciblés par la pseudo-classe :
- L'élément
<dialog>lorsqu'il est ouvert avec la méthode du DOMshowModal(). - Un élément ciblé par la pseudo-classe
:fullscreenlorsqu'il est ouvert avec la méthode du DOMrequestFullscreen().
Exemples
Mettre en forme une boîte de dialogue
Dans cet exemple, on met en forme une boîte de dialogue modale qui s'ouvre lorsqu'on active le bouton « Mettre à jour les détails ». Cet exemple est construit à partir del'exemple présent sur la page de l'élément<dialog>.
<!-- Boîte de dialogue contextuelle simple contenant un formulaire --><dialog> <form method="dialog"> <p> <label >Animal préféré : <select> <option></option> <option>Crevette en saumure</option> <option>Panda rouge</option> <option>Singe-araignée</option> </select> </label> </p> <menu> <button value="cancel">Annuler</button> <button value="default">Confirmer</button> </menu> </form></dialog><menu> <button>Mettre à jour les détails</button></menu><output></output>CSS
:modal { border: 5px solid red; background-color: yellow; box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);}const updateButton = document.getElementById("updateDetails");const favDialog = document.getElementById("favDialog");const outputBox = document.querySelector("output");const selectEl = favDialog.querySelector("select");const confirmBtn = favDialog.querySelector("#confirmBtn");// Si un navigaeur ne prend pas en charge, on masque le contenu// de la boîte de dialogue par défaut.if (typeof favDialog.showModal !== "function") { favDialog.hidden = true; /* un script alternatif pour les navigateurs historiques. */}// Le bouton "Mettre à jour les détails" ouvre <dialog> en modalupdateButton.addEventListener("click", () => { if (typeof favDialog.showModal === "function") { favDialog.showModal(); } else { outputBox.value = "Désolé, l'API <dialog> n'est pas prise en charge par ce navigateur."; }});// Le champ "Animal préféré" définit la valeur du bouton d'envoiselectEl.addEventListener("change", (e) => { confirmBtn.value = selectEl.value;});// Le bouton "Confirmer" du formulaire déclenche la fermeture de la boîte avec [method="dialog"]favDialog.addEventListener("close", () => { outputBox.value = `Bouton ${ favDialog.returnValue } cliqué - ${new Date().toString()}`;});Résultat
Spécifications
| Specification |
|---|
| HTML # selector-modal |
| Selectors Level 4 # selectordef-modal |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<dialog> - Les autres pseudo-classes relatives à l'état d'affichage :
- La liste complète despseudo-classes