Vous êtes dans la zone de contenu principal de la page

« Pop in » modale

Cet article est en cours de rédaction.
Les explications sur les scripts ne sont pas encore détaillées. Ça va arriver…

Petit point sémantique : nous allons parler ici de la construction d'un fenêtre pseudo « modale », donc d'une popin et non pas d'une popup. En effet, dans l'histoire ancienne du web, avant que les navigateurs n'utilisent un système d'onglets, il était assez courant de créer des fenêtres modales, dites « popups ».
Ces nouvelles fenêtres venaient en superposition de la fenêtre courante et avaient pour particularité de bloquer l'accès à cette dernière.

Bien évidemment, des petits malins, plus souvent appelés « régie publicitaire » ce sont dit que c'était quand même un bon moyen d'obliger les internautes à afficher des contenus non demandés.
Donc, un jour, des gens encore plus malins se sont dit qu'ils allaient les proscrire. Pas totalement, mais en empêchant que ces popups puissent s'ouvrir toutes seules mais, surtout qu'elles ne bloqueraient pas la fenêtre ouvrante. Et c'est là que sont arrivées les popins.

Donc, définition de ces petites choses :

Popup :: ou pop up, voulant dire « apparaître » est une nouvelle fenêtre système de navigateur. Comme ce n'est pas le sujet abordé ici, voir le fonctionnement sur MDN
Popin :: ou pop in, voulant dire « entrer brusquement » est un objet HTML inséré dans la page courante en superposition du contenu existant. Le plus souvent, un calque de fond vient bloquer l'accès à l'arrière plan.

Maintenant que nous savons de quoi nous parlons, c'est parti pour les explications.

UX/UI, accessibilité, etc…

L'interface des popins peut vite commencer à poser des petits soucis lors de leur intégration. Il va falloir prendre en compte différents paramêtres :

Les dimensions d'affichage ;
l'affichage du contenu ;
le chargement du contenu ;
les terminaux (mobile, tablette, ordinateur de bureau) ;
les différents navigateurs, particulièrement Safari sous iOs ;
et bien entendu, l'accessibilité ! Si si…

Au final, ça devient vite un casse-tête à faire manger son clavier à un intégrateur web. Sans sel.

Anatomie d'une popin

Jusque là, rien de bien extraordinaire… c'est une popin.
Mais dans une popin, on peut avoir du contenu, là c'est plutôt normal, mais aussi une barre de titre, un bouton de fermeture, un pied de bloc fixé en bas pour conserver apparent le bouton d'action principale (type « ajouter au panier » ou valider une action d'un formulaire) ou tout autre chose nécessaire à l'interface utilisateur.

Et tout ça doit rester visible dans la fenêtre du navigateur, quelle que soit sa hauteur et c'est le moment où ça se corse un peu. Il est courant de voir des popins qui défilent avec la page, d'autres dont le contenu déborde ou disparait dans les tréfonds et encore d'autres où on ne sait pas où cliquer pour valider l'action ou la refermer. Et là, nous n'avons pas encore parlé d'accessibilité, notamment en naviguant au clavier.
Le principal problème reste cette fameuse hauteur qui est le plus souvent calculée en Javascript. Peu performant et surtout pas adaptatif en cas de rotation du terminal (mobile ou tablette), sauf à recalculer en cas de redimensionnement de la zone d'affichage (le viewport in english).

Les 4 modèles de popin

Les utilitaires Javascript et CSS

Il va donc falloir utiliser du Javascipt pour afficher et charger les contenus de la popin et un peu de CSS pour gérer l'affichage et la gestion de la hauteur de cette popin que nous allons gentiment nommer « mary-poppins ». Oui je sais… Mais comme le menu « burger » en mobile s'appelle « cote-de-boeuf », autant poursuivre sur la lignée !

Variables Javascript utilitaires

La librairie jQuery est nécessaire.

En premier lieu, il nous faut quelques variables. FOCUSABLE_SELECTORS permet de cibler les éléments focusables, KEYCODES est une astuce de fainéant parce que j'ai la flemme de mémoriser les codes de touches clavier et enfin une variable DOM à portée globale qui évite de demander à jQuery de rechercher des éléments maintes fois utilisés sur un site. C'est aussi comme ça que jQuery est performant…
Enfin, une variable globalOpenTrigger qui va permettre de replacer le focus sur les éléments déclencheurs d'ouverture de popin. Ce point est important pour la partie accessibilité.

const FOCUSABLE_SELECTORS = 'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"], [contenteditable]';
const KEYCODES = {
  BACKSPACE: 8,
  TAB: 9,
  ENTER: 13,
  ESC: 27,
  SPACE: 32,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40
};
// utilisé dans popin et closer : repositionner le focus
let globalOpenTrigger = null;
DOM = {
  window:    $(window),
  document:  $(document),
  html:    $('html'),
  body:    $('body').first(),
  header:    $('body > header').first(),
  mobile:    function() { return 'ontouchstart' in window }
};
GLOBALS = {
  motion = function() {
    return !$('.prefers-reduced-motion-reduce').first().is(':visible')
  }
};
/*
 * fonction d'internationalisation des JS
 * utilise un objet GLOBALS.l18n (voir code source de cette page)
 */
( (__) => {
  'use strict';
  __.means = (wording) => {
    let sentence = undefined;
    if(typeof GLOBALS === 'object') {
      sentence = GLOBALS.l18n[wording] || undefined;
    }
    return sentence !== undefined ? sentence : wording + ' is not defined in GLOBALS.l10n';
  };
})(jQuery);

Fonctions Javascript utilitaires

Utilitaire de fermeture des popins modales.

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source ladeuil.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  'use strict';
  __.closer = () => {
    let modals = DOM.body.find('.modal'),
      overlay = __('#overlay');
    modals.not(overlay).fadeOut(GLOBALS.motion() ? 100 : 0);
    overlay.fadeOut((GLOBALS.motion() ? 200 : 0), function(){
      modals.remove();
    });
    DOM.html.removeClass('noscroll');
    if(globalOpenTrigger !== null) {
      globalOpenTrigger.trigger('focus');
      globalOpenTrigger = null;
    }
  };
})(jQuery);

Utilitaire de « trap focus ». Ce script permet la navigation au clavier en boucle à l'intérieur de popin. Cette fonctionnalité est nécessaire pour l'accessibilité.

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source ladeuil.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  'use strict';
  __.trapFocus = (element) => {
    let focusable = element.find(FOCUSABLE_SELECTORS);
    if (focusable.length) {
      let start_ = focusable[0],
        end_ = focusable[focusable.length - 1];
      (element ? element : start_).focus();
      element.on('keydown', function(event) {
        if (event.keyCode === KEYCODES.TAB) {
          (event.shiftKey && document.activeElement === start_) && (
            event.preventDefault(),
            end_.focus()
          );
          (!event.shiftKey && document.activeElement === end_) && (
            event.preventDefault(),
            start_.focus()
          );
        }
      });
    }
  };
})(jQuery);

Utilitaire de gestion automatisée des z-index qui permet de ne pas avoir les gérer en CSS.

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source ladeuil.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  'use strict';
  __.zindex = function (fromDomNode) {
    let r = [];
    __("*", (fromDomNode == null ? DOM.body : fromDomNode )).each(function () {
      let z = parseInt(__(this).css('z-index'), 10);
      !isNaN(z) && r.push(z)
    });
    let last = r.sort(function (a, b) {
      return a-b
    }).reverse()[0];
    if(last === undefined) {
      last =  0;
    }
    return parseInt(last, 10) + 1;
  };
})(jQuery);

Utilitaire d'affichage du calque de fond (overlay).

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source ladeuil.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  'use strict';
  __.overlay = set => {
    let settings = __.extend({
        css : null,
        time: 100,
        wait: false,
        keepHeader: false,
        styles: null
      }, set),
      overlay = __('<div/>', {
        'id': 'overlay',
        'class': 'modal' + (settings.css != null ? ' ' + settings.css : '') + (settings.wait ? ' overlay-wait': '')
      });
    ( __('#overlay').length && __.closer() );
    settings.styles !== null && overlay.attr('style', settings.styles);
    DOM.body.append(overlay);
    DOM.html.addClass('noscroll');
    overlay.css({
      'z-index': settings.keepHeader ? __.zindex(DOM.header.css('z-index') - 1) : __.zindex(),
      'top': settings.keepHeader ? DOM.header.outerHeight() : 0,
      'bottom': 0
    }).fadeIn( GLOBALS.motion() ? settings.time : 0 );
    if(!overlay.hasClass('overlay-wait')) {
      DOM.document.on('keyup', function(e){
        e.which === KEYCODES.ESC && __.closer()
      });
    }
  };
})(jQuery);

La fonction d'affichage de la popin.
Détails à venir pour les options possibles (chargment asynchrone ou markup statique, largeur, etc.).

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source ladeuil.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  'use strict';
  __.popin = set => {
    globalOpenTrigger = __(document.activeElement);
    let settings = __.extend({
      css:     null,
      full:     false,
      markup:   null,
      overlay:   true,
      stick:     null,
      title:     set.title === '' ? __.means('alert_default_header') : (typeof set.title === 'undefined' ? null : set.title ),
      url:     null,
      width:     null
    }, set);
    if((settings.url == null && settings.markup == null) || (settings.url != null && settings.markup != null)) {
      console.log('URL ou contenu HTML existant nécessaire, et pas les deux en même temps !');
      return;
    }
    let callBackContent = () => {
      let buttonCloser = __('<button/>', {
        'class': 'cross',
        'type': 'button'
      }).append(__('<span/>', {
        'class': 'clip'
      }).text(__.means('close_modal')));
      modal.prepend(buttonCloser.on('click', () => {
        __.closer()
      })).addClass('loaded').find('.close').on('click', () => {
        __.closer();
      });
      modal.attr({
        'aria-modal': 'true',
        'role': 'dialog',
        'aria-live': 'assertive'
      });
      /*
       * fonction spécifiques kortic
       */
      typeof __.customize_forms === 'function' && __.customize_forms(modal_content);
      typeof __.trapFocus === 'function' && __.trapFocus(modal);
      typeof __.copyCode === 'function' && __.copyCode(modal_content);
      typeof __.lazyIO === 'function' && __.lazyIO(modal_content);
      /*
       * fin
       */
      modal.find('a[target="_blank"]').attr('rel', 'noreferrer');
      // a11y -> set focus on first focusable element
      buttonCloser.focus();
    };
    let modal = __('<div/>', {
        'id' : 'mary-poppins',
        'class': 'popin modal' + (settings.full !== false ? ' full-modal' :'') + (settings.css !== null ? ' ' + settings.css + '-modal' : ''),
        'tabindex': '0'
      }),
      modal_content = __('<div/>', {class: 'popin-content'});
    if(settings.title !== null) {
      modal.attr({
        'aria-labelledby': 'mary-poppins-header'
      }).addClass('with-sticky-top').prepend(__('<div/>', {'id': 'mary-poppins-header', class: 'sticky-top'}).text(settings.title));
    }
    // fermeture des modales existantes
    DOM.body.find('.modal').length && __.closer();
    // affichage d'un background
    settings.overlay && __.overlay();
    settings.stick !== null && modal.addClass('with-sticky-bottom');
    modal.css({
      zIndex: __.zindex(),
    }).prepend(modal_content.html(__.means('loading')));
    modal.css({ width: (settings.width !== null ? settings.width : (settings.full === false && '30rem')) });
    DOM.body.append(modal);
    if(settings.url !== null) {
      modal_content.load(settings.url, (response, status) => {
        if(status === 'success') {
          callBackContent();
        } else {
          __.message({
            'text': 'Erreur de chargement',
            'css': 'warning'
          });
        }
      });
    }
    if(settings.markup !== null) {
      modal_content.html(settings.markup);
      callBackContent();
    }
  };
})(jQuery);

Feuilles de styles CSS associée

Les variables custom CSS utiles

/* Variables default */
/* default */
:root {
  --option-background-color: rgb(255,255,255)
  --default: rgb(0,0,0)
  --background-global-overlay: rgb(255,255,255)
  --box-shadow: rgba(240,240,240,1);
}
/* darkmode */
@media (prefers-color-scheme: dark) {
  :root {
    --option-background-color: rgb(17,136,17)
    --default: rgba(190,190,190,1);
    --background-global-overlay: rgb(34,68,34)
    --box-shadow: rgba(50,50,50,1);
  }
}
/* lightmode */
@media (prefers-color-scheme: light) {
  :root {
    --option-background-color: rgb(255,136,255)
    --default: rgb(51,153,51)
    --background-global-overlay: rgb(255,255,255)
    --box-shadow: rgba(220,220,220,1);
  }
}
/* gouttières */
@media (max-width: 63.9375rem) {
  :root {
    --gutter: 1.5rem;
    --half-gutter: 0.75rem;
    --small-gutter: 0.375rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --gutter: 2.625rem;
    --half-gutter: 1.3125rem;
    --small-gutter: 0.6563rem;
  }
}

.popin input, .popin textarea {
  background-color: var(--option-background-color);
}
.popin {
  background-color: var(--background-global-overlay);
  color: inherit;
  left: 50%;
  max-width: calc(100vw - var(--small-gutter));
  position: fixed;
  top: 50%;
  width: var(--body-width);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  border-radius: var(--radius);
}
html:not(.contrast) .popin {
  box-shadow: 0 0 0 1px var(--box-shadow), 0 0 10px -5px rgba(0,0,0,1);
}
html.contrast .popin {
  box-shadow: 0 0 0 1px var(--box-shadow);
}
@media (prefers-reduced-motion: no-preference) {
  .popin {
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
  }
}
.popin.loaded {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
#mary-poppins.popin:focus {
  outline: none;
}
@media (max-width: 63.9375rem) {
  .popin {
    --popin-gutter: calc(var(--gutter) * 1.5);
    --popin-internal-gutter: var(--gutter);
  }
}
@media (min-width: 64rem) {
  .popin {
    --popin-gutter: var(--gutter);
    --popin-internal-gutter: var(--half-gutter);
  }
}
.popin .popin-content {
  margin-bottom: var(--popin-gutter);
  margin-top: var(--popin-gutter);
  overflow: auto;
  padding: 0 var(--popin-internal-gutter);
}
.popin:not(.with-sticky-bottom) .popin-content {
  margin-bottom: calc(var(--popin-gutter) / 2);
}
.popin {
  --max-height: calc(100vh - calc(var(--popin-gutter) * 2));
}
.popin.with-sticky-bottom {
  --max-height: calc(100vh - calc(var(--popin-gutter) * 2.5));
}
@media (any-hover: none) {
  .popin .popin-content {
    max-height: calc(var(--max-height) - var(--popin-gutter));
  }
  /* si Safari mobile = viewport différent */
  body.safari .popin .popin-content {
    max-height: calc(var(--max-height) - 6.25rem);
  }
}
@media (any-hover: hover) {
  .popin .popin-content {
    max-height: calc(var(--max-height) - var(--popin-gutter));
  }
}
.popin.with-sticky-top .popin-content {
  padding-top: calc(var(--popin-internal-gutter) / 2);
}
.popin.with-sticky-bottom .popin-content {
  margin-bottom: calc(var(--popin-gutter) * 1.5);
  padding-bottom: var(--popin-internal-gutter);
}
.popin.with-sticky-top div.sticky-top {
  background-color: var(--background-global-overlay);
  bottom: calc(100% - var(--popin-gutter));
  box-shadow: 0 -1px 0 0 var(--box-shadow) inset;
  left: 0;
  line-height: var(--popin-gutter);
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 var(--popin-gutter) 0 var(--popin-internal-gutter);
  font-weight: 500;
  color: var(--cta);
  border-radius: var(--radius) var(--radius) 0 0;
}
.popin.with-sticky-bottom div.sticky-bottom {
  background-color: var(--background-global-overlay);
  bottom: 0;
  box-shadow: 0 1px 0 0 var(--box-shadow) inset;
  left: 0;
  line-height: calc(var(--popin-gutter) * 1.5);
  padding: 0 var(--popin-internal-gutter);
  position: absolute;
  right: 0;
  top: calc(100% - calc(var(--popin-gutter) * 1.5));
  border-radius: 0 0 var(--radius) var(--radius);
  margin: 0;
}
.popin .cross {
  background-image:url('/svg/spritesheet.svg#i-cross');
}
html.dark-mode .popin .cross {
  background-image:url('/svg/spritesheet.svg#i-cross-light');
}
.popin .cross {
  width: var(--popin-gutter);
  height: var(--popin-gutter);
  background-color: transparent;
  top: 0;
  right: 0;
  border-radius: 0 var(--radius) 0 0;
  z-index: 1;
  position: absolute;
  background-position: center center;
  background-size: 1.25rem 1.25rem;
}
@media (max-width: 30rem) {
  .popin {
    min-width: calc(100% - var(--gutter));
  }
}
/** SPECIFIC WRAPPER AND POPINS **/
/* une classe spécifique peut être ajoutée en ajoutant le paramètre dans la fonction $.overlay */
#overlay {
  position: fixed;
  left: 0;
  right: 0;
  display: none;
}
/*
Styles en cas de prise en charge du mode sombre/clair
*/
html.light-mode #overlay {
  background-color: rgba(255,255,255,0.9);
}
html.dark-mode #overlay {
  background-color: rgba(0,0,0,0.8);
}
html.light-mode.contrast #overlay {
  background-color: rgba(255,255,255,1);
}
html.dark-mode.contrast #overlay {
  background-color: rgba(0,0,0,1);
}
/*
Style pour overlay d'attente
*/
#overlay.overlay-wait {
  background-color: transparent;
  background-position: center;
  background-size: 2.5rem 2.5rem;
  background-image: url(/svg/spritesheet.svg#i-wheel);
  opacity: 1;
}

Utilisation des sources

Les sources de « « Pop in » modale » proposées par Kortic sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).

Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

Un petit sou avec ™