Pop-ins (Pop-ins)

Les pop-ins sont des cadres qui surgissent sur les pages en cours de consultation afin de passer au lecteur, une information importante et / ou nécessitant un choix, une validation de sa part. Contrairement aux messages et aux toasts, elles bloquent la lecture jusqu’à ce que le lecteur agisse sur elle.

Usage

Les pop-ins sont :

« Modales », car le contenu de la page est désactivé jusqu’à une réponse de l’utilisateur.
« Lightbox », car l’arrière-plan est estompé par un voile.

Les pop-ins répondent à 2 besoins :

Obtenir une petite quantité d’informations contextuelles de l’utilisateur.
Fournir une information importante à l’utilisateur. Ce dernier doit en prendre connaissance avant de pouvoir poursuivre sa navigation. Attention, la popin, de part son mode de fonctionnement, est très intrusive : elle masque et bloque le contenu ! Il est donc conseillé de bien choisir le type de notification entre la pop-in, les messages et les toasts…

Fermeture

Les pop-ins informatives (un seul bouton) peuvent être fermées via :

Le bouton primaire de la pop-in.
La croix de la pop-in.
Le voile.
Le bouton « Précédent » du système ou son raccourci.

Les pop-ins décisionnelles (au-moins 2 boutons) peuvent être fermées sans « validation » via :

Les boutons secondaires d’annulation (« Annuler », « Fermer »…) de la pop-in.
La croix de la pop-in.
Le voile.
Le bouton « Précédent » du système ou son raccourci.

et fermées avec « validation » en cliquant sur un bouton primaire.

Bonnes pratiques

Les pop-ins sont vivement conseillées pour confirmer définitivement un choix avant un engagement, de sorte que l’utilisateur ait la possibilité de changer d’avis si nécessaire.
Elles interrompent les utilisateurs. C’est pourquoi, elles doivent être utilisées avec parcimonie. Leur rareté permet également d’être pris au sérieux par les utilisateurs.
Ne pas afficher plusieurs pop-ins les unes après les autres, car elles ajoutent une complexité.
Les tunnels dans les pop-ins sont à proscrire.
Les pop-ins ne sont pas appropriées pour les tâches riches en plusieurs étapes. Cette complexité justifie une ou plusieurs pages dédiées.
Evitez les contenus trop importants et le scroll dans les pop-ins.
Ne jamais afficher de pop-ins dans certains contextes :
- Avant le chargement d’une page. L’objectif est ne pas interrompe l’utilisateur avant même de prendre connaissance de la page. De plus, Google pénalise ce type de pratique.
- Juste après la connexion. La pop-in serait tout aussi intrusive et la connexion est une étape dans un parcours.
- Lors d’une tâche critique. Les utilisateurs détestent être interrompus. La pop-in peut s’afficher une fois la tâche terminée.
Le titre se limite à une seule ligne si possible, même sur mobile.
Évitez de terminer le titre par un point.
Pour les boutons, privilégiez les wordings clairs et directs, ex : "Voulez-vous supprimer définitivement tous ces articles ?" "Supprimer" au lieu d’un simple "Oui".
Évitez les boutons de type " En savoir plus " ou des liens qui quittent la pop-in.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
Helpers (classes d’aide),
composant Titles (titres),
composant Close button (bouton de fermeture),
composant Buttons (boutons).

Pop-in simple

La balise <dialog> offre un moyen simple et standard pour afficher une fenêtre modale (imposant une action de l’utilisateur) : la pop-in est automatiquement centrée, elle intègre un voile, prends le focus, est fermable au clavier avec la touche « esc », est directement reconnu comme fenêtre de dialogue pour l’accessibilité…

N. B. – La balise <dialog> n’est pas gérée par Safari avant la version 15.4. Elle est affichée au chargement de la page, ce qui peut être problématique. Si vous souhaitez garder la compatibilité avec ces anciennes versions de Safari, vous devrez ajouter 1 ligne de JS et un peu de CSS.

JS :

if(typeof HTMLDialogElement != "function") { document.body.classList.add('no-dialog') }

CSS :

.no-dialog dialog,
.no-dialog [data-ofmodal] {
    display: none;
}

Pop-in simple

Pour intégrer cette pop-in, il suffit d’ajouter la classe su-pop-in à la balise <dialog>.

Une pop-in simple ne donne qu’un court message avec validation de lecture. Elle ne comportera donc qu’un seul bouton. Il y a donc 2 zones spécifiées à l’intérieur de cette pop-in : su-content-area pour le message et su-buttons-area pour la zone <menu> contenant les boutons.

Le bouton de fermeture porte l’attribut data-sudialog s’appuyant sur le composant JS Dialog.

Ci-dessous, pour l’exemple, un bouton avec ce même attribut data-sudialog permet d’ouvrir la pop-in…

<dialog id="pop-in-1" class="su-pop-in">
    <div class="su-content-area">
        <p>Message d’information. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <menu class="su-buttons-area">
        <li><button class="su-button su-primary" data-sudialog>Valider</button></li>
    </menu>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":"#pop-in-1"}'>Afficher la pop-in</button>

Pop-in avec titre et 2 choix

Cette pop-in ajoute à la pop-in simple, un titre et un bouton secondaire pour offrir plus de choix (généralement une annulation). Pour ce titre, on utilise la classe su-h2 et pour le bouton secondaire, la classe su-secondary. Ce bouton doit être avant le bouton su-primary. Attention, il est préférable de mettre le titre au-dessus de la zone su-content-area afin que le scroll ne l’affecte pas.

<dialog id="pop-in-2" class="su-pop-in">
    <p class="su-h2">Pop-in avec 2 possibilités</p>
    <div class="su-content-area">
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <menu class="su-buttons-area">
        <li><button class="su-button su-secondary" data-sudialog>Annuler</button></li>
        <li><button class="su-button su-primary" data-sudialog>Valider</button></li>
    </menu>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":"#pop-in-2"}'>Afficher la pop-in</button>

Pop-in avec titre, 2 choix, croix de fermeture scroll interne et blocage du scroll externe

Dans cette pop-in « riche », on a ajouté une croix de fermeture avec la classe close-area et du texte long pour illustrer le scroll interne. On a aussi ajouté du texte long sur la page pour illustrer le blocage de scroll de la page.

<dialog id="pop-in-3" class="su-pop-in su-body-no-scroll">
    <div class="su-close-area">
        <button class="su-close" data-sudialog>
            <i class="su-icon">
                fermer
            </i>
        </button>
    </div>
    <p class="su-h2">Pop-in avec 2 possibilités, croix et long message</p>
    <div class="su-content-area">
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
    </div>
    <menu class="su-buttons-area">
        <li><button class="su-button su-secondary" data-sudialog>Annuler</button></li>
        <li><button class="su-button su-primary" data-sudialog>Valider</button></li>
    </menu>
</dialog>
<button class="su-button su-primary" data-sudialog='{"sel":"#pop-in-3"}'>Afficher la pop-in</button>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
<p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
<p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>

Liste des classes disponibles

su-pop-in
su-content-area
su-buttons-area
su-close-area
su-body-no-scroll

Classes annexes

su-h2 (dépendant du composant Titles (titres))
su-close (dépendant du composant Close button (bouton de fermeture))
su-button (dépendant du composant Buttons (boutons))
su-primary (dépendant du composant Buttons (boutons))
su-secondary (dépendant du composant Buttons (boutons))
su-icon (dépendant des icônes de SipaUI)