IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

Bovino

[Actualité] Des fenêtres modales natives en HTML5

Note : 4 votes pour une moyenne de 2,75.
3 Commentaires
par
Bovino
, 05/02/2015 à 11h59 (3791 Affichages)


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 <dialog> !

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([message]) 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 <dialog>
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Fenêtre modale HTML5</title>
	<style>
                #promptCompat{
                        display: none;
                }
                #promptCompat.no_dialog{
                        box-shadow: 0 0 5px 2px red;
                        padding: 10px;
                        display: block;
                        text-align: center;
                        font-weight: bold;
                }
                .boutons{
                        padding: 10px;
                }
                dialog{
                        border-radius: 10px;
                        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
                }
                dialog::backdrop{
                        background-color: rgba(0, 0, 0, 0.6);
                }
        </style>
</head>
<body>
	<h1>Fenêtre modale HTML5</h1>
	<p id="promptCompat">Votre navigateur ne pend pas en charge les balises <code>&lt;dialog></code></p>
	<dialog id="mydialog" open>
		Voici une fenêtre d'information !<br />
		<p>Elle peut contenir tout type de balises HTML.</p>
		<div>Remplir ce champ pour modifier le message de fermeture <input id="closeMsg" placeholder="Y compris des éléments de formulaire" /></div>
		<div class="boutons"><button onclick="$dialog.close()">Fermer</button>&nbsp;<button onclick="$dialog.returnValue = document.getElementById('closeMsg').value">Définir un message</button></div>
	</dialog>
	<div class="boutons"><button onclick="$dialog.show()">Ouvrir en mode normal</button>&nbsp;<button onclick="$dialog.showModal()">Ouvrir en mode modal</button></div>
	<div class="boutons"><button onclick="alert($dialog.open)">Vérifier l'attribut <code>open</code></button></div>
	<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);
                });
        </script>
</body>
</html>
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.

Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Viadeo Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Twitter Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Google Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Facebook Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Digg Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Delicious Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog MySpace Envoyer le billet « Des fenêtres modales natives en HTML5 » dans le blog Yahoo

Catégories
HTML / CSS , Javascript , Développement Web

Commentaires

  1. Avatar de kolodz
    • |
    • permalink
    En effet, IE 9 et Firefox 35.0.1 ne supporte pas cette balise.
    Ce qui rend la balise inutilisable pour le moment. =/
  2. Avatar de SylvainPV
    • |
    • permalink
    Pas tout à fait ! Il existe un polyfill de l'élément <dialog> fait par l'équipe de Chrome : https://github.com/GoogleChrome/dialog-polyfill
    On peut donc utiliser l'élément sur IE et Firefox en mode dégradé.
  3. Avatar de psychadelic
    • |
    • permalink
    Ca fonctionne parfaitement avec Vivaldi !

    trop cool, plus ça va, et plus je kiff ce navigateur !

    https://vivaldi.com