11548 sujets

JavaScript, DOM et API Web HTML5

Je m'explique: pour les besoins d'une interface j'utilise des messages qui s'ouvrent dans une div générée en DOM. Je crée aussi simultanément une div overlay sur le principe des lightbox pour empêcher l'accès à l'ensemble des liens de la page.
Pour générer cette div je fais:
document.body.appendChild(maDivOverlay);

Puis je lui applique ces styles css:
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.4;

Ma div overlay recouvre bien la totalité de la fenêtre du navigateur sauf dans le cas ou il y a un ascenseur sur la page. Dans ce cas le contenu accessible en scrollant n'est pas recouvert par ma div overlay.
Comment faire pour que ma div prenne la hauteur de la totalité de la page, scroll y-compris?
Suis-je obligé par exemple de récupérer en js la hauteur de la totalité du contenu de la page pour ensuite l'appliquer à ma div?
Merci pour vos retours.
Bonjour,

En CSS, tu peux aussi passer par un positionnement fixe, qui permettra à ta division de suivre le scroll de l'utilisateur.
moreall a écrit :
Je crée aussi simultanément une div overlay sur le principe des lightbox pour empêcher l'accès à l'ensemble des liens de la page.

Moui, enfin ça n'empêche pas vraiment l'accès aux liens, on est d'accord… Smiley cligne
Bonjour audrasjb,
Bonne idée le positionnement fixe, du coup ma div overlay reste toujours positionnée sur l'ensemble de la fenêtre du navigateur. Je viens de tester sur firefox, ça fonctionne bien. Y-a t'il des contre indications au position:fixed?

En ce qui concerne l'accès aux liens (en fait des boutons qui font appel à des fonctions js), l'idée c'est que lorsqu'une div message est générée on ne puisse pas en générer une autre simultanément en cliquant accidentellement (ou intentionnellement) sur un bouton. En jouant sur le z-index de ma div overlay ça fonctionne bien.

a écrit :
Moui, enfin ça n'empêche pas vraiment l'accès aux liens, on est d'accord…


Si l'utilisateur trifouille dans le code avec firebug par exemple il pourra supprimer ma div overlay. C'est ce que tu veux dire?