Quand on a besoin d'un modal vite fait mais qu'on n'utilise pas de framework CSS, c'est toujours la galère.

Je pense avoir trouvé ma technique de choix.

Je sais pas pourquoi je précise sans jQuery. Peut-être parce qu'hier encore je cliquais sur un pen qui avait l'air chouette sur Codepen et il avait un vieux $(document).ready(). Beurk.

Comme d'habitude en développement web il y a 12 moyens différents d'avoir le même résultat mais l'idée est toujours la même:

• Afficher une boîte de dialogue en avant plan;
• "Griser" ce qu'il y a en dessous, ce qui empêche également d'interargir avec l'interface sous-jacente — On appelle ça un overlay en anglais donc je vais l'appeler comme ça plutôt que euh... Une couche? Un revêment? Un calque? Je sais pas trop.

Vous le sentez peut-être déjà venir mais pour superposer des trucs on a générallement besoin de combinaisons de position: absolute ou position: fixed et/ou d'autres machins qui créent des CONTEXTES D'EMPILEMENT parce que oui, ça peut devenir extrêment compliqué avec float, l'opacité, etc.

Pourquoi l'opacité crée un contexte d'empilement? J'en sais rien! Je comprends rien. Lisez cette page si vous voulez avoir un avant goût des trucs de pure folie qu'un moteur de rendu de navigateur doit être capable de faire.

Avant j'utilisais un élément, genre un div, positionné de manière absolute (ou fixed) qui servait d'overlay.

Problème: il y a un vieux div vide qui traîne dans le code, et croyez-le ou non mais c'est mal vu de nos jours.

Autre problème: le même vieux div n'est probablement pas enfant de body mais d'autre chose (du modal par ex.) et ça peut compliquer massivement l'affaire et vous forcer à mettre des trucs en position: relative au hasard sur la page (c'est ça ou comprendre l'article dont je parlais plus haut).

J'ai trouvé mieux: un pseudo élément de type :after (support navigateurs > IE8) couplé à un sélecteur d'attribut. Voici à quoi ressemble les styles pour body:

html, body {
  min-height: 100%;
}

body {
  font-family: sans-serif;
  color: #333;
  padding: 0;
  margin: 0;
}

body[data-overlay]:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  /*
  Fallback:
  */
  background-color: #000;
  background-color: rgba(0,0,0,0.5);
}

L'overlay ne couvrira pas toute la page sans le min-height: 100% (ou 100vh ou équivalent ).

Déjà maintenant là, n'importe quel endroit de votre code JS (vous pouvez le tester dans la console aussi) peut afficher l'overlay comme ça:

document.body.setAttribute('data-overlay', true);

Et pour désactiver:

document.body.removeAttribute('data-overlay');

Pourquoi j'ai appelé ça data-overlay? Ben euh... Comme ça on est certains qu'il n'y aura pas un véritable attribut overlay un jour pour l'élément body. Attention que l'attibut se trouvera aussi dans document.body.dataset.overlay mais personne au monde n'utilise ce truc donc on est biens.

Pour le modal en lui-même il y a plusieurs moyens de s'y prendre. Moi j'aime bien qu'il s'agisse d'un enfant direct de body parce que sinon position: absolute pose plein de problèmes (fixed fonctionne, normalement).

En pratique sentez vous libres d'utiliser position: fixed, le seul navigateur non supporté est Opera Mini.

Pour centrer facilement mon modal j'utilise un div parent (largeur 100%), puis un div de contenu à l'intérieur qui utilise margin-left et margin-right sur auto pour centrer horizontalement (vieille méthode).

Voici ce que ça donne en pratique avec une petite animation gratuite en prime:

Vous trouverez le code complet sur ce gist.