Bonjour,

Je souhaiterais charger une page en transparence au-dessus d'une autre en cliquant sur un bouton.
C'est peut-être basique mais je ne trouve pas …
Pourriez-vous m'aider ?

Merci pour votre aide
Modifié par Neoprojet (13 Nov 2017 - 23:09)
Il faudra mettre le contenu de cette page dans un conteneur faisant 100% de haut (donc min-height: 100vh, ou mettre tout en absolute avec des valeurs top, bottom, left et right à 0, ou encore une autre méthode), éventuellement ajouter un z-index pour éviter les télescopages avec certains éléments déjà présents sur la page. Pour la "transparence", un background-color en rgba.

Exemple :
.reader {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, .5);
}

Modifié par Olivier C (14 Nov 2017 - 07:56)
Bonjour @Olivier C

Et pour faire apparaitre ce container ? Je dois jouer avec des "visibility:hidden" ?

Merci de votre aide
Neoprojet a écrit :
Bonjour @Olivier C
Et pour faire apparaitre ce container ? Je dois jouer avec des "visibility:hidden" ?
Merci de votre aide


Pour finaliser ta demande n'oublies jamais cette simple règle:
Là où visibility:hidden laissera un espace entre les éléments précédant et suivant l'élément rendu invisible, display:none "efface" l'élément ciblé sans laisser de trace : les éléments précédents et suivants se retrouvent côte à côte, comme si l'élément visé n'existait pas.

La force de display, est que les éléments restants sont contigus comme si ton code de l'élément n'existait plus !