IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Des fenêtres modales natives en HTML5
Chrome Canari supporte déjà le nouvel élément dialog

Le , par Bovino
17 commentaires

151PARTAGES

4  0 

:salut:

La création de fenêtres modales (ou pas du reste) a toujours été un besoin récurrent des développeurs Web.
Certes, il existe les méthodes natives de JavaScript alert(), prompt() ou confirm(), mais leur côté intrusif et surtout peu configurable les rend quasiment obsolètes.

De nombreux tutoriels existent déjà pour créer ce type de fenêtres en JavaScript (celui de Soh Tanaka Créez une fenêtre modale avec CSS et jQuery est l'un des plus populaires de developpez.com) ou en CSS (Créer une fenêtre modale avec CSS 3 ou Galerie au click sans JavaScript). Mais cela demande encore beaucoup de code et de technique pour être mis en œuvre.

Encore une fois, HTML5 vient à votre secours avec l'élément

!

Cet élément permet de créer des fenêtres, modales ou non, très simplement. La balise peut contenir n'importe quel contenu HTML. Elle peut être affichée ou masquée en utilisant son API JavaScript et il est possible de lui appliquer des styles facilement, ainsi qu'au masque extérieur en cas de fenêtre modale en utilisant le pseudoélément CSS ::backdrop.

La spécification de la balise indique qu'elle peut posséder un attribut de type booléen open qui indique si la fenêtre doit être visible ou non.
Son interface JavaScript prévoit une propriété booléenne open et une propriété de type chaine returnValue.
Attention, la propriété JavaScript open correspond à l'état de la fenêtre au moment où elle est appelée, l'attribut HTML correspond à l'état à la création de la page !
La propriété returnValue permet de définir un message à renvoyer au script.
D'autre part, trois méthodes permettent de manipuler la fenêtre : show() et showModal() permettent d'ouvrir la fenêtre en mode normal ou modal, close() permet de la fermer avec comme paramètre optionnel un message à affecter à returnValue.
Enfin, seul l'événement close ne semble supporté (et encore, uniquement disponible via addEventListener()
, aucun attribut d'événement spécifique ne semble pris en compte).

Exemple de code
L'exemple suivant vous montre comment il est possible d'utiliser la balise





Fenêtre modale HTML5



Fenêtre modale HTML5


Votre navigateur ne pend pas en charge les balises <dialog>



Voici une fenêtre d'information !

Elle peut contenir tout type de balises HTML.


Remplir ce champ pour modifier le message de fermeture

 


 


<script>
var $dialog = document.getElementById('mydialog');
if(!('show' in $dialog)){
document.getElementById('promptCompat').className = 'no_dialog';
}
$dialog.addEventListener('close', function() {
console.log('Fermeture. ', this.returnValue);
});



Voir cet exemple en ligne.

Support des navigateurs
À l'heure actuelle, seule Chrome Canari semble proposer un support correct pour cette balise en activant l'option "Activer les fonctionnalités expérimentales de Web Platform" dans chrome:flags. Chrome en version standard reconnait la balise (toujours en activant l'option) mais l'affichage est bogué.

Sources : HTML5 Rocks, page d'exemple documentée, Spécifications WHATWG.

Et vous
:fleche: Pensez-vous que cette implémentation vous sera utile ?
:fleche: Au contraire, considérez-vous qu'il s'agit d'un énième gadget ?
:fleche: Êtes-vous prêt à inclure cette balise dans vos pages ?
:fleche: Sinon, quel support de navigateurs minimal attendrez-vous ?

Vous avez lu gratuitement 2 972 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

17 commentaires
Commenter Signaler un problème
Kaamo
Avatar de Kaamo
Membre émérite https://www.developpez.com
Le 27/09/2013 à 14:19
Dommage que ça arrive avec 10 ans de retard
2  0 
Shuty
Avatar de Shuty
Membre éprouvé https://www.developpez.com
Le 27/09/2013 à 14:34
Et encore, d'ici là a ce que les browsers l'aient tous mis en place...
2  0 
kolodz
Avatar de kolodz
Modérateur https://www.developpez.com
Le 27/09/2013 à 15:18
Il faut encore que les navigateurs le gère dans leur version stable. Puis, que les framework intègrent cette nouvelle gestion... (Qui gère le fait que certains navigateurs n'ai justement pas cette possibilité) Je ne vois pas une entreprise utiliser cela demain en production...

Cordialement,
Patrick Kolodziejczyk.
2  0 
Bovino
Avatar de Bovino
Rédacteur https://www.developpez.com
Le 27/09/2013 à 16:18
Citation Envoyé par Bovino
en activant l'option "Activer les fonctionnalités expérimentales de Web Platform" dans chrome:flags.
1  0 
rodolphebrd
Avatar de rodolphebrd
Expert confirmé https://www.developpez.com
Le 27/09/2013 à 18:38
Pensez-vous que cette implémentation vous sera utile ?
Définitivement, quelle économie de temps.
Surtout que
La balise peut contenir n'importe quel contenu HTML
Êtes-vous prêt à inclure cette balise dans vos pages ?
Non vu que c'est pas bien supporté par les navigateurs.

Sinon, quel support de navigateurs minimal attendrez-vous ?
Tous de manière utopique.

Note : c'est amusant de voir cette balise prévue à l'origine pour les conversations et réhabilitée pour un usage différent de sa destination première.
1  0 
rodolphebrd
Avatar de rodolphebrd
Expert confirmé https://www.developpez.com
Le 27/09/2013 à 20:31
@sinople :
The <dialog> element originally entered the HTML5 scene as a way to markup conversations but it was cut from the spec back in 2009. However now it’s back, and it has a brand new role.
http://blog.teamtreehouse.com/a-prev...dialog-element
1  0 
erwanlb
Avatar de erwanlb
Inactif https://www.developpez.com
Le 27/09/2013 à 16:01
Y a pas à dire l'HTML5 évolue à vitesse grand V....
1  1 
dk
Avatar de dk
Membre actif https://www.developpez.com
Le 27/09/2013 à 16:41
ça marche mieux
0  0 
xanthellis
Avatar de xanthellis
Nouveau membre du Club https://www.developpez.com
Le 30/09/2013 à 14:58
Oui je l'utiliserai mais encore une fois, le temps que tous les navigateurs le prennent en charge, on sera à HTML6
0  0 
gentil2005
Avatar de gentil2005
Membre éprouvé https://www.developpez.com
Le 01/10/2013 à 2:20
pour ma part, j'attend encore que les types "number" et "email" soient pris en compte par tous les navigateurs...ça prend trop de temps et déjà, voilà, les "fenêtres modales" sont là, on sait pas combien de temps elles vont mettre aussi pour être reconnu par les navigateurs...
0  0 
Commenter Signaler un problème