Pages

CSS : étude de modal

Voici un cas d'étude CSS intéressant :

modal


Nous allons tenter de comprendre deux aspects :
- apparition d'une zone opaque
- disparition de l'ascenseur

Nous n'allons pas pour le moment étudier la partie dynamique JS.

Zone opaque

Code origine



Utilisons la position fixe


Utilisons z-index 

passer la valeur de z-index à -5;

Etude 

rappel : overflow
Essayer de comprendre l'ajout de la classe sur le body !
Explication

TP
Etudier le comportement du code (regarder la console) et tenter de le corriger !

Autre idée
Les solutions de la zone opaque ne sont pas uniques !
Voici la solution en image de chez deezer avec position : absolute.



Mais avez vous remarqué que lorsque vous cliquez sur la photo précédente une zone opaque apparaît.