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)
connecté
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 !
connecté
Neoprojet a écrit :
Et pour faire apparaitre ce container ? Je dois jouer avec des "visibility:hidden" ?

Comme le dit Zelena il faut jouer avec display:none, que l'on met par défaut sur la div, puis que l'on enlève via javascript une fois le bouton cliqué.
Olivier C a écrit :

Comme le dit Zelena il faut jouer avec display:none, que l'on met par défaut sur la div, puis que l'on enlève via javascript une fois le bouton cliqué.


Merci pour votre aide, mais niveau code ça donne quoi svp ? Je ne m'y connais pas en Java Smiley decu Actuellement j'ai ceci, suis-je dans le bon ?


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



<script>
		function ouvrir_box(id, titre, text1) {
		  var divelement = document.getElementById(id);
		  document.getElementById('titre-box').innerHTML = titre;
		  document.getElementById('texte1-box').innerHTML = text1;
		  divelement.style.display = 'block';
		}

		function fermer_box(id) {
		  var divelement = document.getElementById(id);
		  divelement.style.display = 'none';
		}
	</script>

Modifié par Neoprojet (21 Nov 2017 - 13:39)