et un autre à popover. Tableau récapitulatif Pour bien se rendre compte du nombre de fonctionnalités qui intéragissent, voici d’emblée un tableau récapitulatif des éléments que nous allons couvrir… popover (modal) (non modal)
Overlay oui oui oui oui Modal non oui non non Inert non oui non non Top layer oui oui non non Focus trap non oui oui non Dismissible echap ou manuel echap echap non Commentaires Exclusif : ouvrir un popover ferme le précédent Masqué par défaut, visible avec l’attribut open Masqué par défaut, visible avec l’attribut open Les différentes notions de ce tableau sont détaillées tout au long de cet article de synthèse : popover, , overlay, modal, inert, top layer, focus trap, dismissible. Overlay Le terme "overlay" ne représente pas véritablement un composant mais une caractéristique. Un élément "overlay" est simplement un élément qui se place au-dessus d’autres éléments dans la page. Tous les éléments au sein de cette liste sont des overlays : une "fenêtre modale", un menu déroulant, une Tooltip, une boîte de dialogue, un Datepicker, un Dropdown, un Toaster, une notification, un bandeau cookie, etc. Dans cette même famille nous croiserons les termes de "pop-up" (nouvelle fenêtre au-dessus de la fenêtre actuelle du navigateur) et "pop-in" (élément au-dessus des autres éléments de la page, synonyme de "overlay", donc). Modal et non-Modal Selon les spécifications HTML, le terme "modal" ne désigne pas un composant en tant que tel, mais un ensemble de caractéristiques : un élément en overlay peut être "modal" ou "non-modal". Un élément Modal est le seul à être interactif dans un document, il requiert toute l’attention de l’usager, tout le reste de la page doit être rendu inerte (inert) car aucune autre action ne doit être possible mis à part réagir à cet élément (fermer, accepter, refuser, abandonner, etc.). Par exemple, un bandeau de recueil de données personnelles doit être consenti par l’utilisateur (obligation légale RGPD) sans quoi il ne devrait pas pouvoir accéder au site. C’est donc un élément de type Modal. Un autre exemple pourrait être celui d’une une modale "login/password" si l’accès au site nécessite une authentification. Un élément non-Modal, à l’inverse, laisse la possibilité à l’utilisateur de continuer à interagir avec la page. C’est génaralement de cas des éléments tooltip, menu déroulant, dropdown, datepicker, notification, alerte, bandeau cookie. inert Un contenu inerte est un contenu avec lequel les utilisatrices et utilisateurs ne peuvent pas interagir. Il n’existe que visuellement, mais ne peut être atteint, cliqué, défilé ni consulté au moyen de technologies d’assistance. Différentes techniques permettent de rendre une partie de page inerte : L’attribut HTML inert, L’ancienne technique via la combinaison de aria-hidden=true et de tabindex="-1", Un polyfill JavaScript : https://github.com/WICG/inert, L’élément (voir cette section pour les détails). Top layer Top layer est une couche d’empilement au dessus de l’ensemble du document (existe depuis juin 2023). Cette couche n’est pas concernée par z-index ni par overflow: hidden. Les éléments s’empilent dans l’ordre d’apparition dans le Top layer. Certains éléments sont placés automatiquement par défaut dans le top layer : les éléments en fullscreen API les éléments (sauf exceptions) les éléments avec l’attribut popover (sauf exceptions) ::backdrop Ce pseudo-élement s’applique uniquement aux objets placés dans le top layer. Il permet d’apporter des styles visuels "sous" un overlay en obscurcissant la page par exemple. /* Cette ombre n’est affichée que si l’élément */ /* est dans le Top layer */ dialog::backdrop { background: rgba(0,0,0,0.3); } Focus trap Certains élément nécessitent que la navigation au clavier (touches Tab ou Shift + Tab) ne quitte pas le périmètre du composant : en atteignant le dernier élément focusable, on retourne en boucle au premier élément focusable au sein du composant. C’est le comportement attendu et souhaité en accessibilité lorsque le composant est "modal" et que tout le reste du document est inerte. Le focus trap doit toutefois être temporaire et disparaître quand le composant est quitté ou rejeté (dismissed). Dismissible (jetable) Certains overlay nécessitent de pouvoir être fermés de manière automatique (via touche echap ou au focus à l’extérieur du composant) et/ou de façon manuelle (en validant un bouton de soumission par exemple). Ce comportement se nomme "Dismissible". Dialog Un Dialog est un composant de type overlay destiné à apporter une information à un usager et recueillir une interaction de sa part. Les spécifications proposent une API HTMLDialogElement ainsi qu’un élément natif qui peut être "Modal" ou "non-Modal". Le déclenchement se fait via l’API JavaScript : show(): Ouvre le dialog en non-Modal showModal(): Ouvre le dialog en Modal close(): Ferme le dialog et renvoie en option une valeur Voici un exemple concret :

Une modale de type Modal

 const modal = document.querySelector("#modale"); modal.showModal(); Les particularités de l’élément sont : role=dialog par défaut Masqué par défaut, visible avec l’attribut open Nécessite un nom accessible (aria-label ou aria-labelledby) Focus trap : activé par défaut Jetable (dismiss) via touche echap Selon son état (Modal ou non-Modal), d’autres caractéristiques s’ajoutent à la liste précédente. Si le est "Modal" : Il est placé dans le Top layer, ::backdrop est applicable, Tout le reste du document est rendu automatiquement inert. Si le est "non-Modal" : Il n’est pas placé dans le Top layer (donc les règles de stacking context et de z-index s’appliquent), ::backdrop ne s’applique pas, Tout le reste du document est interactif. Les spécifications d’accessibilité ARIA proposent un attribut role="dialog" pouvant être appliqué sur n’importe quel élément HTML autre que , mais sachez que cela implique par défaut : Que l’élement est "non-Modal" (peut le devenir avec aria-modal="true"), Qu’il n’est pas dans le Top layer, Qu’il ne rend pas le reste de page inerte, Qu’il ne crée pas de Focus trap, Qu’il n’est pas Jetable (dismiss) via touche echap. En outre, sans API JavaScript showModal(), l’élément est non-Modal :

je suis non-modal

 :modal La pseudo-classe :modal s’applique à tous les éléments à l’état Modal (par exemple un ouvert avec l’API showModal()). #modale:modal { background: hotpink; } popover Un popover est un overlay composé d’un attribut popover associé à un déclencheur :
Choucroute et Saucisses de Strasbourg !
Les particularités d’un élément pourvu d’un attribut popover sont : L’élément est "non-Modal", Il est placé dans le Top layer, ::backdrop est applicable, Aucun role spécifique ne lui est affecté. Le choix dépend du type de composant (role="alert" par exemple), Jetable (dismiss) via touche echap par défaut, Exclusif : il peut y en avoir plusieurs dans la page mais un seul dans l’état déployé à la fois. Le comportement dismissible (jetable) dépend de la valeur associée à l’attribut popover : light dismiss (
, valeur par défaut si omise) : c’est le comportement idéal pour tooltip, menu déroulant, dropdown, datepicker, manual dismiss (
) : parfait pour des notifications ou des alertes. :popover-open La pseudo-classe CSS :popover-open représente un élément popover (c’est-à-dire un élément avec un attribut popover) qui est dans l’état ouvert. :popover-open { /*...*/ } OK alors quand est-ce qu’on utilise quoi ? Le nombre de possibilités offertes par les spécifications ne facilite pas le choix lorsqu’il s’agit d’intégrer un composant qui doit se placer au-dessus d’un contenu. Entre les modales, les menus déroulants, les boîtes de dialogues et autres bandeaux d’alerte, il n’est guère aisé de piocher parmi , popover ou une simple
en position abolute dopée avec JavaScript. Les réponses aux deux questions suivantes sont déterminantes dans votre choix final : L’utilisateur a-t-il le droit d’ignorer ce composant ? (si non, alors il s’agit sans aucun doute d’un élément "Modal" car tout le reste de la page doit devenir inert) Le visuel attendu est-il une "modale" avec backdrop obscurci ? (si oui, là aussi nous aurons recours à un élément de type "Modal") J’espère avoir éclairci la plupart des points d’ombres (même s’il en demeure sans doute) de ce vaste sujet des différents overlays. Pour finir, voici quelques articles de référence absolument indispensables pour en savoir plus. Ressources https://hidde.blog/dialog-modal-popover-differences/ https://blog.logrocket.com/comparing-popover-api-dialog-element/ https://open-ui.org/components/popover.research.explainer/ https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html Publié par Alsacreations.com"> et un autre à popover. Tableau récapitulatif Pour bien se rendre compte du nombre de fonctionnalités qui intéragissent, voici d’emblée un tableau récapitulatif des éléments que nous allons couvrir… popover (modal) (non modal)
Overlay oui oui oui oui Modal non oui non non Inert non oui non non Top layer oui oui non non Focus trap non oui oui non Dismissible echap ou manuel echap echap non Commentaires Exclusif : ouvrir un popover ferme le précédent Masqué par défaut, visible avec l’attribut open Masqué par défaut, visible avec l’attribut open Les différentes notions de ce tableau sont détaillées tout au long de cet article de synthèse : popover, , overlay, modal, inert, top layer, focus trap, dismissible. Overlay Le terme "overlay" ne représente pas véritablement un composant mais une caractéristique. Un élément "overlay" est simplement un élément qui se place au-dessus d’autres éléments dans la page. Tous les éléments au sein de cette liste sont des overlays : une "fenêtre modale", un menu déroulant, une Tooltip, une boîte de dialogue, un Datepicker, un Dropdown, un Toaster, une notification, un bandeau cookie, etc. Dans cette même famille nous croiserons les termes de "pop-up" (nouvelle fenêtre au-dessus de la fenêtre actuelle du navigateur) et "pop-in" (élément au-dessus des autres éléments de la page, synonyme de "overlay", donc). Modal et non-Modal Selon les spécifications HTML, le terme "modal" ne désigne pas un composant en tant que tel, mais un ensemble de caractéristiques : un élément en overlay peut être "modal" ou "non-modal". Un élément Modal est le seul à être interactif dans un document, il requiert toute l’attention de l’usager, tout le reste de la page doit être rendu inerte (inert) car aucune autre action ne doit être possible mis à part réagir à cet élément (fermer, accepter, refuser, abandonner, etc.). Par exemple, un bandeau de recueil de données personnelles doit être consenti par l’utilisateur (obligation légale RGPD) sans quoi il ne devrait pas pouvoir accéder au site. C’est donc un élément de type Modal. Un autre exemple pourrait être celui d’une une modale "login/password" si l’accès au site nécessite une authentification. Un élément non-Modal, à l’inverse, laisse la possibilité à l’utilisateur de continuer à interagir avec la page. C’est génaralement de cas des éléments tooltip, menu déroulant, dropdown, datepicker, notification, alerte, bandeau cookie. inert Un contenu inerte est un contenu avec lequel les utilisatrices et utilisateurs ne peuvent pas interagir. Il n’existe que visuellement, mais ne peut être atteint, cliqué, défilé ni consulté au moyen de technologies d’assistance. Différentes techniques permettent de rendre une partie de page inerte : L’attribut HTML inert, L’ancienne technique via la combinaison de aria-hidden=true et de tabindex="-1", Un polyfill JavaScript : https://github.com/WICG/inert, L’élément (voir cette section pour les détails). Top layer Top layer est une couche d’empilement au dessus de l’ensemble du document (existe depuis juin 2023). Cette couche n’est pas concernée par z-index ni par overflow: hidden. Les éléments s’empilent dans l’ordre d’apparition dans le Top layer. Certains éléments sont placés automatiquement par défaut dans le top layer : les éléments en fullscreen API les éléments (sauf exceptions) les éléments avec l’attribut popover (sauf exceptions) ::backdrop Ce pseudo-élement s’applique uniquement aux objets placés dans le top layer. Il permet d’apporter des styles visuels "sous" un overlay en obscurcissant la page par exemple. /* Cette ombre n’est affichée que si l’élément */ /* est dans le Top layer */ dialog::backdrop { background: rgba(0,0,0,0.3); } Focus trap Certains élément nécessitent que la navigation au clavier (touches Tab ou Shift + Tab) ne quitte pas le périmètre du composant : en atteignant le dernier élément focusable, on retourne en boucle au premier élément focusable au sein du composant. C’est le comportement attendu et souhaité en accessibilité lorsque le composant est "modal" et que tout le reste du document est inerte. Le focus trap doit toutefois être temporaire et disparaître quand le composant est quitté ou rejeté (dismissed). Dismissible (jetable) Certains overlay nécessitent de pouvoir être fermés de manière automatique (via touche echap ou au focus à l’extérieur du composant) et/ou de façon manuelle (en validant un bouton de soumission par exemple). Ce comportement se nomme "Dismissible". Dialog Un Dialog est un composant de type overlay destiné à apporter une information à un usager et recueillir une interaction de sa part. Les spécifications proposent une API HTMLDialogElement ainsi qu’un élément natif qui peut être "Modal" ou "non-Modal". Le déclenchement se fait via l’API JavaScript : show(): Ouvre le dialog en non-Modal showModal(): Ouvre le dialog en Modal close(): Ferme le dialog et renvoie en option une valeur Voici un exemple concret :

Une modale de type Modal

 const modal = document.querySelector("#modale"); modal.showModal(); Les particularités de l’élément sont : role=dialog par défaut Masqué par défaut, visible avec l’attribut open Nécessite un nom accessible (aria-label ou aria-labelledby) Focus trap : activé par défaut Jetable (dismiss) via touche echap Selon son état (Modal ou non-Modal), d’autres caractéristiques s’ajoutent à la liste précédente. Si le est "Modal" : Il est placé dans le Top layer, ::backdrop est applicable, Tout le reste du document est rendu automatiquement inert. Si le est "non-Modal" : Il n’est pas placé dans le Top layer (donc les règles de stacking context et de z-index s’appliquent), ::backdrop ne s’applique pas, Tout le reste du document est interactif. Les spécifications d’accessibilité ARIA proposent un attribut role="dialog" pouvant être appliqué sur n’importe quel élément HTML autre que , mais sachez que cela implique par défaut : Que l’élement est "non-Modal" (peut le devenir avec aria-modal="true"), Qu’il n’est pas dans le Top layer, Qu’il ne rend pas le reste de page inerte, Qu’il ne crée pas de Focus trap, Qu’il n’est pas Jetable (dismiss) via touche echap. En outre, sans API JavaScript showModal(), l’élément est non-Modal :

je suis non-modal

 :modal La pseudo-classe :modal s’applique à tous les éléments à l’état Modal (par exemple un ouvert avec l’API showModal()). #modale:modal { background: hotpink; } popover Un popover est un overlay composé d’un attribut popover associé à un déclencheur :
Choucroute et Saucisses de Strasbourg !
Les particularités d’un élément pourvu d’un attribut popover sont : L’élément est "non-Modal", Il est placé dans le Top layer, ::backdrop est applicable, Aucun role spécifique ne lui est affecté. Le choix dépend du type de composant (role="alert" par exemple), Jetable (dismiss) via touche echap par défaut, Exclusif : il peut y en avoir plusieurs dans la page mais un seul dans l’état déployé à la fois. Le comportement dismissible (jetable) dépend de la valeur associée à l’attribut popover : light dismiss (
, valeur par défaut si omise) : c’est le comportement idéal pour tooltip, menu déroulant, dropdown, datepicker, manual dismiss (
) : parfait pour des notifications ou des alertes. :popover-open La pseudo-classe CSS :popover-open représente un élément popover (c’est-à-dire un élément avec un attribut popover) qui est dans l’état ouvert. :popover-open { /*...*/ } OK alors quand est-ce qu’on utilise quoi ? Le nombre de possibilités offertes par les spécifications ne facilite pas le choix lorsqu’il s’agit d’intégrer un composant qui doit se placer au-dessus d’un contenu. Entre les modales, les menus déroulants, les boîtes de dialogues et autres bandeaux d’alerte, il n’est guère aisé de piocher parmi , popover ou une simple
en position abolute dopée avec JavaScript. Les réponses aux deux questions suivantes sont déterminantes dans votre choix final : L’utilisateur a-t-il le droit d’ignorer ce composant ? (si non, alors il s’agit sans aucun doute d’un élément "Modal" car tout le reste de la page doit devenir inert) Le visuel attendu est-il une "modale" avec backdrop obscurci ? (si oui, là aussi nous aurons recours à un élément de type "Modal") J’espère avoir éclairci la plupart des points d’ombres (même s’il en demeure sans doute) de ce vaste sujet des différents overlays. Pour finir, voici quelques articles de référence absolument indispensables pour en savoir plus. Ressources https://hidde.blog/dialog-modal-popover-differences/ https://blog.logrocket.com/comparing-popover-api-dialog-element/ https://open-ui.org/components/popover.research.explainer/ https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html Publié par Alsacreations.com">
Feedbot
Ajouter à une liste
Créer une liste
L’arrivée de l’attribut et de l’API HTML popover facilite la gestion de tous les éléments qui doivent s’afficher au-dessus du contenu d’une page Web (fenêtre modale, tooltip, menu déroulant, etc.). Cette nouvelle fonctionnalité vient s’ajouter à certaines déjà existantes, au point où l’on ne sait plus forcément où donner de la tête entre les éléments dits "Dialog", "Modal", "Popover" ou autres "Overlay". Tentons de rassembler toutes les caractéristiques globales et techniques de l’ensemble de ces notions afin d’y voir plus clair.
Cet article a pour objectif de poser les bases et de définir les différents termes en jeu. Dans un deuxième temps un article détaillé sera consacré à et un autre à popover. Tableau récapitulatif Pour bien se rendre compte du nombre de fonctionnalités qui intéragissent, voici d’emblée un tableau récapitulatif des éléments que nous allons couvrir… popover (modal) (non modal)
Overlay oui oui oui oui Modal non oui non non Inert non oui non non Top layer oui oui non non Focus trap non oui oui non Dismissible echap ou manuel echap echap non Commentaires Exclusif : ouvrir un popover ferme le précédent Masqué par défaut, visible avec l’attribut open Masqué par défaut, visible avec l’attribut open Les différentes notions de ce tableau sont détaillées tout au long de cet article de synthèse : popover, , overlay, modal, inert, top layer, focus trap, dismissible. Overlay Le terme "overlay" ne représente pas véritablement un composant mais une caractéristique. Un élément "overlay" est simplement un élément qui se place au-dessus d’autres éléments dans la page. Tous les éléments au sein de cette liste sont des overlays :
une "fenêtre modale", un menu déroulant, une Tooltip, une boîte de dialogue, un Datepicker, un Dropdown, un Toaster, une notification, un bandeau cookie, etc.
Dans cette même famille nous croiserons les termes de "pop-up" (nouvelle fenêtre au-dessus de la fenêtre actuelle du navigateur) et "pop-in" (élément au-dessus des autres éléments de la page, synonyme de "overlay", donc). Modal et non-Modal Selon les spécifications HTML, le terme "modal" ne désigne pas un composant en tant que tel, mais un ensemble de caractéristiques : un élément en overlay peut être "modal" ou "non-modal". Un élément Modal est le seul à être interactif dans un document, il requiert toute l’attention de l’usager, tout le reste de la page doit être rendu inerte (inert) car aucune autre action ne doit être possible mis à part réagir à cet élément (fermer, accepter, refuser, abandonner, etc.). Par exemple, un bandeau de recueil de données personnelles doit être consenti par l’utilisateur (obligation légale RGPD) sans quoi il ne devrait pas pouvoir accéder au site. C’est donc un élément de type Modal. Un autre exemple pourrait être celui d’une une modale "login/password" si l’accès au site nécessite une authentification. Un élément non-Modal, à l’inverse, laisse la possibilité à l’utilisateur de continuer à interagir avec la page. C’est génaralement de cas des éléments tooltip, menu déroulant, dropdown, datepicker, notification, alerte, bandeau cookie. inert Un contenu inerte est un contenu avec lequel les utilisatrices et utilisateurs ne peuvent pas interagir. Il n’existe que visuellement, mais ne peut être atteint, cliqué, défilé ni consulté au moyen de technologies d’assistance. Différentes techniques permettent de rendre une partie de page inerte :
L’attribut HTML inert, L’ancienne technique via la combinaison de aria-hidden=true et de tabindex="-1", Un polyfill JavaScript : https://github.com/WICG/inert, L’élément (voir cette section pour les détails). Top layer Top layer est une couche d’empilement au dessus de l’ensemble du document (existe depuis juin 2023). Cette couche n’est pas concernée par z-index ni par overflow: hidden. Les éléments s’empilent dans l’ordre d’apparition dans le Top layer. Certains éléments sont placés automatiquement par défaut dans le top layer :
les éléments en fullscreen API les éléments (sauf exceptions) les éléments avec l’attribut popover (sauf exceptions)
::backdrop Ce pseudo-élement s’applique uniquement aux objets placés dans le top layer. Il permet d’apporter des styles visuels "sous" un overlay en obscurcissant la page par exemple. /* Cette ombre n’est affichée que si l’élément */ /* est dans le Top layer */ dialog::backdrop { background: rgba(0,0,0,0.3); } Focus trap Certains élément nécessitent que la navigation au clavier (touches Tab ou Shift + Tab) ne quitte pas le périmètre du composant : en atteignant le dernier élément focusable, on retourne en boucle au premier élément focusable au sein du composant. C’est le comportement attendu et souhaité en accessibilité lorsque le composant est "modal" et que tout le reste du document est inerte. Le focus trap doit toutefois être temporaire et disparaître quand le composant est quitté ou rejeté (dismissed). Dismissible (jetable) Certains overlay nécessitent de pouvoir être fermés de manière automatique (via touche echap ou au focus à l’extérieur du composant) et/ou de façon manuelle (en validant un bouton de soumission par exemple). Ce comportement se nomme "Dismissible". Dialog Un Dialog est un composant de type overlay destiné à apporter une information à un usager et recueillir une interaction de sa part. Les spécifications proposent une API HTMLDialogElement ainsi qu’un élément natif qui peut être "Modal" ou "non-Modal". Le déclenchement se fait via l’API JavaScript :
show(): Ouvre le dialog en non-Modal showModal(): Ouvre le dialog en Modal close(): Ferme le dialog et renvoie en option une valeur
Voici un exemple concret :

Une modale de type Modal


const modal = document.querySelector("#modale"); modal.showModal();
Les particularités de l’élément sont :
role=dialog par défaut Masqué par défaut, visible avec l’attribut open Nécessite un nom accessible (aria-label ou aria-labelledby) Focus trap : activé par défaut Jetable (dismiss) via touche echap
Selon son état (Modal ou non-Modal), d’autres caractéristiques s’ajoutent à la liste précédente.
Si le est "Modal" :
Il est placé dans le Top layer, ::backdrop est applicable, Tout le reste du document est rendu automatiquement inert. Si le est "non-Modal" :
Il n’est pas placé dans le Top layer (donc les règles de stacking context et de z-index s’appliquent), ::backdrop ne s’applique pas, Tout le reste du document est interactif. Les spécifications d’accessibilité ARIA proposent un attribut role="dialog" pouvant être appliqué sur n’importe quel élément HTML autre que , mais sachez que cela implique par défaut :
Que l’élement est "non-Modal" (peut le devenir avec aria-modal="true"), Qu’il n’est pas dans le Top layer, Qu’il ne rend pas le reste de page inerte, Qu’il ne crée pas de Focus trap, Qu’il n’est pas Jetable (dismiss) via touche echap.
En outre, sans API JavaScript showModal(), l’élément est non-Modal :

je suis non-modal

 :modal La pseudo-classe :modal s’applique à tous les éléments à l’état Modal (par exemple un ouvert avec l’API showModal()). #modale:modal { background: hotpink; } popover Un popover est un overlay composé d’un attribut popover associé à un déclencheur :
Choucroute et Saucisses de Strasbourg !

Les particularités d’un élément pourvu d’un attribut popover sont :
L’élément est "non-Modal", Il est placé dans le Top layer, ::backdrop est applicable, Aucun role spécifique ne lui est affecté. Le choix dépend du type de composant (role="alert" par exemple), Jetable (dismiss) via touche echap par défaut, Exclusif : il peut y en avoir plusieurs dans la page mais un seul dans l’état déployé à la fois.
Le comportement dismissible (jetable) dépend de la valeur associée à l’attribut popover :
light dismiss (
, valeur par défaut si omise) : c’est le comportement idéal pour tooltip, menu déroulant, dropdown, datepicker, manual dismiss (
) : parfait pour des notifications ou des alertes. :popover-open La pseudo-classe CSS :popover-open représente un élément popover (c’est-à-dire un élément avec un attribut popover) qui est dans l’état ouvert. :popover-open { /*...*/ } OK alors quand est-ce qu’on utilise quoi ? Le nombre de possibilités offertes par les spécifications ne facilite pas le choix lorsqu’il s’agit d’intégrer un composant qui doit se placer au-dessus d’un contenu. Entre les modales, les menus déroulants, les boîtes de dialogues et autres bandeaux d’alerte, il n’est guère aisé de piocher parmi , popover ou une simple
en position abolute dopée avec JavaScript. Les réponses aux deux questions suivantes sont déterminantes dans votre choix final :
L’utilisateur a-t-il le droit d’ignorer ce composant ? (si non, alors il s’agit sans aucun doute d’un élément "Modal" car tout le reste de la page doit devenir inert) Le visuel attendu est-il une "modale" avec backdrop obscurci ? (si oui, là aussi nous aurons recours à un élément de type "Modal")
J’espère avoir éclairci la plupart des points d’ombres (même s’il en demeure sans doute) de ce vaste sujet des différents overlays. Pour finir, voici quelques articles de référence absolument indispensables pour en savoir plus. Ressources
https://hidde.blog/dialog-modal-popover-differences/ https://blog.logrocket.com/comparing-popover-api-dialog-element/ https://open-ui.org/components/popover.research.explainer/ https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html Publié par Alsacreations.com
www.alsacreations.com
Dialog, Modal, Popover : la synthèse

ENJOY_USING Feedbot ?

FUNDING

COPYRIGHT Raph
Logo by Maous