18041 sujets
Questions générales et questions de débutants
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 :
Modifié par Olivier C (14 Nov 2017 - 07:56)
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)
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 !
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
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)