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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Des fenêtres modales natives en HTML5


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut Des fenêtres modales natives en HTML5


    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 : 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.

    Et vous
    Pensez-vous que cette implémentation vous sera utile ?
    Au contraire, considérez-vous qu'il s'agit d'un énième gadget ?
    Êtes-vous prêt à inclure cette balise dans vos pages ?
    Sinon, quel support de navigateurs minimal attendrez-vous ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    Dommage que ça arrive avec 10 ans de retard

  3. #3
    Membre éprouvé Avatar de Shuty
    Homme Profil pro
    Ingénieur en développement
    Inscrit en
    Octobre 2012
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur en développement
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2012
    Messages : 630
    Points : 1 174
    Points
    1 174
    Par défaut
    Et encore, d'ici là a ce que les browsers l'aient tous mis en place...
    Agence web Dim'Solution, créateur de solutions numériques
    Sites internet, ecommerce, logiciels, applications mobiles, référencement (SEO), plugin Prestashop, Magento, WordPress, Joomla!...

    Cours de trading gratuit | Envoyer des sms gratuitement | Envoyer des fax gratuitement | Plateforme de Fax à l'international

  4. #4
    Membre habitué
    Profil pro
    Développeur informatique
    Inscrit en
    Juin 2002
    Messages
    264
    Détails du profil
    Informations personnelles :
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2002
    Messages : 264
    Points : 175
    Points
    175
    Par défaut
    ya pas à dire, le HTML ça fait rêver...

  5. #5
    Modérateur
    Avatar de kolodz
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2008
    Messages
    2 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 211
    Points : 8 316
    Points
    8 316
    Billets dans le blog
    52
    Par défaut
    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.
    Si une réponse vous a été utile pensez à
    Si vous avez eu la réponse à votre question, marquez votre discussion
    Pensez aux FAQs et aux tutoriels et cours.

  6. #6
    Inactif  
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Février 2009
    Messages
    1 083
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2009
    Messages : 1 083
    Points : 1 222
    Points
    1 222
    Par défaut
    Y a pas à dire l'HTML5 évolue à vitesse grand V....

  7. #7
    Membre émérite

    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    3 995
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 3 995
    Points : 2 528
    Points
    2 528
    Par défaut
    Citation Envoyé par Kaamo Voir le message
    Dommage que ça arrive avec 10 ans de retard
    Vieux motard que jamais !

  8. #8
    dk
    dk est déconnecté
    Membre actif
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 75
    Points : 238
    Points
    238
    Par défaut
    Bizarre je suis sur Chrome canari et l'exemple ne fonctionne pas

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par Bovino
    en activant l'option "Activer les fonctionnalités expérimentales de Web Platform" dans chrome:flags.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    dk
    dk est déconnecté
    Membre actif
    Profil pro
    Inscrit en
    Juin 2004
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2004
    Messages : 75
    Points : 238
    Points
    238
    Par défaut
    ça marche mieux

  11. #11
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    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.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  12. #12
    Membre chevronné
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2009
    Messages
    1 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2009
    Messages : 1 048
    Points : 2 201
    Points
    2 201
    Par défaut
    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.
    Euh... le terme dialog en programmation ça fait depuis un bout de temps que c'est lié au concept de fenêtre modale.


  13. #13
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    @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
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  14. #14
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2013
    Messages : 10
    Points : 34
    Points
    34
    Par défaut
    Oui je l'utiliserai mais encore une fois, le temps que tous les navigateurs le prennent en charge, on sera à HTML6

  15. #15
    Membre éprouvé
    Avatar de gentil2005
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    148
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Congo-Kinshasa

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Services à domicile

    Informations forums :
    Inscription : Mai 2007
    Messages : 148
    Points : 1 178
    Points
    1 178
    Par défaut
    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...
    Le chemin est long mais la voie est LIBRE!!!

    Adhérer : www.mouvementlibriste.org

  16. #16
    Nouveau membre du Club
    Inscrit en
    Mars 2009
    Messages
    44
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 44
    Points : 38
    Points
    38
    Par défaut
    Testé avec Chrome Version 32.0.1664.0 canary Aura
    - ne fonctionne pas.

  17. #17
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Pour la troisième fois :
    Citation Envoyé par Bovino
    en activant l'option "Activer les fonctionnalités expérimentales de Web Platform" dans chrome:flags.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  18. #18
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    Pour les fainéants, un lien direct vers l'option : chrome://flags/#enable-experimental-...tform-features

Discussions similaires

  1. Réponses: 1
    Dernier message: 03/07/2008, 21h48
  2. Supprimer la croix dans une fenêtre modale
    Par AnneOlga dans le forum C++Builder
    Réponses: 3
    Dernier message: 15/01/2004, 15h52
  3. Liste des fenêtres ouvertes de IE
    Par Trash dans le forum C++Builder
    Réponses: 4
    Dernier message: 09/11/2003, 17h21
  4. Rendre une fenêtre modale non modale
    Par Smortex dans le forum Composants VCL
    Réponses: 2
    Dernier message: 30/03/2003, 18h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo