Supporté par ChromeNon supporté par FirefoxNon supporté par EdgeNon supporté par Safari/iOS <dialog> : Démo HTML5

Mise à jour : 2017-06-12

La balise <dialog> (HTML5.1), apporte un support simplifié des fenêtre pop-up.

<dialog>

Notes sur le tuto


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 = Exemple de dialogue


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>		

Can I Use dialog? Data on support for the dialog feature across the major browsers from caniuse.com.