<dialog> : Démo HTML5
Mise à jour : 2017-06-12
La balise <dialog> (HTML5.1), apporte un support simplifié des fenêtre pop-up.
<dialog>
- Méthodes :
- show() : affiche une boîte de dialogue et la laisse visible sans bloquer l'accès à la page.
- showModal() : affiche une boîte de dialogue modale, qui bloque l'accès au reste de la page.
- close() : ferme la boîte de dialog.
- Attributs :
- returnValue : valeur retour de la méthode close() ci-dessus.
- open : booléen indiquant le statut d'affichage de la boîte de dialogue.
- Évènement :
- onclose : envoyé à la fermeture du dialogue.
Notes sur le tuto
- Librairie de substitution pour les navigateurs ne supportant pas la balise : dialog-polyfill
Exemple de code HTML5
Statut d'affichage du dialogue : open = <span id="isOpen"></span><br> <br> <button id="show">show()</button> <button id="showModal">showModal()</button><br> <br> Valeur renvoyée à la fermeture du dialogue : returnValue = <span id="returnedValue"></span> <dialog id="myDialog"> Exemple de dialogue<br> <br> <button id="close">close()</button> </dialog> <script > function isOpen(){ document.getElementById("isOpen").innerHTML = dialog.open } dialog = document.getElementById("myDialog") var returnValue isOpen() document.getElementById("show").onclick = function(){ dialog.show(); isOpen(); returnValue = "Retour de show()" } document.getElementById("showModal").onclick = function(){ dialog.showModal(); isOpen(); returnValue = "Retour de showModal()" } document.getElementById("close").onclick = function(){ dialog.close(returnValue); isOpen() } document.getElementById("myDialog").onclose = function(){ document.getElementById("returnedValue").innerHTML = dialog.returnValue } </script>
Démonstration du résultat HTML5
Statut d'affichage du dialogue : open =
Valeur renvoyée à la fermeture du dialogue : returnValue =
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isTagSupported("dialog") isAttributeSupported("dialog", "open") isAttributeSupported("dialog", "returnValue") isAttributeSpecified("dialog", "onclose") </script>