{"id":1096,"date":"2023-02-03T17:53:31","date_gmt":"2023-02-03T16:53:31","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1096"},"modified":"2023-02-03T17:53:33","modified_gmt":"2023-02-03T16:53:33","slug":"fenetre-modale-javascript-natif","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/03\/fenetre-modale-javascript-natif\/","title":{"rendered":"Une fen\u00eatre modale en JavaScript natif"},"content":{"rendered":"\n

Aujourd\u2019hui, nouveau retour sur un de mes anciens tutoriels qui a rencontr\u00e9 un certain succ\u00e8s, mon tutoriel sur comment faire une fen\u00eatre modale avec jQuery<\/a>.<\/p>\n\n\n\n

Depuis maintenant \u00e0 peu pr\u00e8s un an, tous les navigateurs majeurs supportent la balise <dialog><\/a><\/code> qui permet de cr\u00e9er des fen\u00eatres modales (\u00e7a \u00e7a tombe bien).<\/p>\n\n\n\n

Un des avantages de cette solution plus moderne est qu\u2019il n\u2019y a plus besoin d\u2019ins\u00e9rer manuellement un \u00e9l\u00e9ment de masquage de la page, maintenant il y a le pseudo-\u00e9l\u00e9ment ::backdrop<\/a><\/code> pour \u00e7a.<\/p>\n\n\n\n\n\n\n\n

Comment \u00e7a marche ?<\/h2>\n\n\n\n

Pour le corps de la modale, rien de bien diff\u00e9rent entre l\u2019ancienne m\u00e9thode et la nouvelle, on remplace la <div><\/code> par un <dialog><\/code>.<\/p>\n\n\n

\n<dialog id="myModal">\n    <div>Bonjour, je suis une fen\u00eatre modale.\n    <br\/>Cliquez sur le masque pour me refermer.<\/div>\n<\/dialog>\n<\/pre><\/div>\n\n\n
Et pour la faire s\u2019afficher, il suffit de la s\u00e9lectionner avec la m\u00e9thode de votre choix (de mon c\u00f4t\u00e9 j\u2019ai une pr\u00e9f\u00e9rence pour querySelector<\/a>), et ensuite d\u2019appeler sa m\u00e9thode showModal()<\/a> dans une fonction li\u00e9e au clic sur un autre \u00e9l\u00e9ment dans la page.<\/p>\n\n\n
\nconst myModal = document.getElementById('myModal');\nconst openModal = document.getElementById('openModal');\n                \nopenModal.addEventListener('click', () => { myModal.showModal(); });\n<\/pre><\/div>\n\n\n
La principale diff\u00e9rence est dans la mani\u00e8re dont on g\u00e8re la fermeture de la modale au clic sur le masque. En effet, avec cette technique moderne, le masque est un pseudo-\u00e9l\u00e9ment (::backdrop), ce qui fait qu\u2019on ne peut pas lui attacher d\u2019eventListener.<\/p>\n\n\n\n
Pour g\u00e9rer cela avec cette nouvelle m\u00e9thode, il faut attacher un eventListener sur la modale elle-m\u00eame et voir si le clic tombe en dehors de ses limites r\u00e9elles (ces limites peuvent \u00eatre retrouv\u00e9es avec la m\u00e9thode getBoundingRectangle()<\/a> de la balise <dialog>.<\/p>\n\n\n
\nmyModal.addEventListener('click', (e) => {\n    const modalRect = myModal.getBoundingClientRect();\n\n    if(e.clientX < modalRect.left || e.clientX > modalRect.right\n    || e.clientY < modalRect.top || e.clientY > modalRect.bottom) {\n        myModal.close();\n    }\n});\n<\/pre><\/div>\n\n\n
En ce qui concerne le changement de couleur du masque, une animation CSS peut \u00eatre utilis\u00e9e. \u00c0 l\u2019heure actuelle (d\u00e9but 2023), cette technique ne fonctionne que pour les navigateurs de la famille Chromium (Brave, Microsoft Edge, Google Chrome\u2026).<\/p>\n\n\n
\n#myModal::backdrop {\n    background-color: rgba(0, 0, 0, .8);\n    animation: fadeIn 3s ease forwards;\n}\n@keyframes fadeIn {\n    from {\n        background-color: transparent;\n    }\n    to {\n        background-color: rgba(0, 0, 0, .8);\n    }\n}\n<\/pre><\/div>\n\n\n
Le code complet<\/a> est disponible avec mes autres d\u00e9monstrations.<\/p>\n\n\n\n
\n\n\n\n
Et voil\u00e0. J\u2019esp\u00e8re vous avoir permis de vous coucher un peu moins b\u00eate ce soir, et vous dis \u00e0 bient\u00f4t.<\/p>\n","protected":false},"excerpt":{"rendered":"
Aujourd\u2019hui, nouveau retour sur un de mes anciens tutoriels qui a rencontr\u00e9 un certain succ\u00e8s, mon tutoriel sur comment faire une fen\u00eatre modale avec jQuery. Depuis maintenant \u00e0 peu pr\u00e8s un an, tous les navigateurs majeurs supportent la balise <dialog> … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[57,56],"class_list":["post-1096","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-fenetre-modale","tag-vanillajs"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-hG","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":171,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/18\/jquery-une-fenetre-modale\/","url_meta":{"origin":1096,"position":0},"title":"[jQuery] Une fen\u00eatre modale","author":"geekc","date":"18\/10\/2012","format":false,"excerpt":"Bonjour \u00e0 tous, aujourd'hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu'est-ce que c'est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier et de l'\u00e9cran. Elle est en g\u00e9n\u00e9ral associ\u00e9e \u00e0 une\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1133,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/10\/gloubi-script-un-systeme-de-tooltip\/","url_meta":{"origin":1096,"position":1},"title":"Gloubi script – un syst\u00e8me de tooltip","author":"geekc","date":"10\/03\/2023","format":false,"excerpt":"J\u2019ai d\u00e9cid\u00e9 cette semaine de me pencher sur le script de tooltip pr\u00e9sent\u00e9 sur le site de gloubiweb. Dans une premi\u00e8re partie je pr\u00e9senterai rapidement le fonctionnement du script actuel, et dans une deuxi\u00e8me, je vous indiquerai comment recr\u00e9er (quasi) \u00e0 l\u2019identique cet ancien script. Pr\u00e9sentation de du code existant\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":1096,"position":2},"title":"Gloubi script – un cadre clignotant","author":"geekc","date":"24\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nous allons nous attaquer \u00e0 un script pr\u00e9sent\u00e9 chez notre gloubi rival qui pourra vous \u00eatre tr\u00e8s utile pour mettre en avant n\u2019importe quel contenu sur, par exemple, la magnifique page d\u2019accueil de votre tout aussi sublime site\u00a0: le cadre clignotant. Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1220,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/03\/01\/automatiser-clic-fortunes-cookie-clicker\/","url_meta":{"origin":1096,"position":3},"title":"Automatiser le clic sur les fortunes de Cookie Clicker","author":"geekc","date":"01\/03\/2024","format":false,"excerpt":"Aujourd\u2019hui, apr\u00e8s avoir effectu\u00e9 une ascension sur Cookie Clicker, je me suis dit : \u201cSi je veux d\u00e9bloquer les fortunes (qui apparaissent dans le fil d\u2019actualit\u00e9s), il va falloir encore que je reste attentif devant mon \u00e9cran\u2026\u201d. C\u2019est alors que je me suis demand\u00e9 s\u2019il n\u2019y avait pas moyen d\u2019automatiser\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":1096,"position":4},"title":"[JavaScript\/HTML5] Et maintenant ajoutons quelques couleurs","author":"geekc","date":"22\/08\/2013","format":false,"excerpt":"Dans mon pr\u00e9c\u00e9dent article Amusons-nous avec les canvas, nous \u00e9tions arriv\u00e9s au r\u00e9sultat ci-dessous: Nous avons donc ici un effet que l'on aurait pu obtenir en CSS. Mais gr\u00e2ce aux  nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre chose qu'une unique couleur ; avec les  on peut\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":211,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","url_meta":{"origin":1096,"position":5},"title":"[JavaScript\/HTML5] Amusons-nous avec les canvas","author":"geekc","date":"11\/08\/2013","format":false,"excerpt":"Aujourd'hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments  du HTML5. Comme les plus attentifs d'entre-vous l'auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l'article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l'article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript. Le HTML La d\u00e9claration\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1096"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1096\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}