Une fenêtre modale — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 6)

Une fenêtre modale

Positionnement et empilement · niveau 3 (difficile)

Énoncé

Écrire le CSS d'un voile qui couvre toute la fenêtre et d'une fenêtre modale de 24 rem au plus (90 % de la fenêtre sur petit écran), centrée dans les deux directions, au-dessus du voile. Calculer la position de la modale dans une fenêtre de 375 sur 667 pixels si sa hauteur est de 200 pixels. Qu'est-ce que ce CSS ne fait pas ?

Corrigé

Le CSS de la section sur les fenêtres modales convient :


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.voile {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgb(0 0 0 / 50%);
}

.modale {
  position: fixed;
  inset: 0;
  z-index: 11;
  width: min(90%, 24rem);
  height: fit-content;
  padding: 1rem 1.5rem;
  margin: auto;
  background: #fff;
  border-radius: 8px;
}

Dans 375 pixels, $90 % \times 375 = 337, 5$ est plus petit que 24 rem (384) : la modale mesure 337,5 de large. Elle est centrée en $((375 - 337, 5) /2, (667 - 200) /2) = (18, 75; 233, 5)$ . Ce CSS ne gère ni le focus, ni la touche Échap, ni le fait que la page sous le voile reste accessible au clavier : c'est le travail de <dialog> et de showModal().