Discussion :

[nero76]

Bonjour,

Je suppose que ce sujet a déjà été abordé, mais je n'arrive pas à trouver d'information intéressante (mes mots-clés sont peut-être mal choisis).

Pour faire simple, je voudrais afficher une div en surimpression lorsqu'un utilisateur clique sur un bouton. Jusque là, rien de compliqué :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script type='text/javascript'>
function afficheBox() {
     $('box').innerHTML='osef';
     $('box').style.display='block';
}
</script>
<div id='box' style='display: none;'>
<input type="button" value="cliquez ici" onclick='afficheBox()' />

Par contre, j'aimerais que cette div apparaisse au centre de la page (en largeur et en hauteur de la zone visible), même si celle-ci a été scrollée.
Pour l'instant, j'utilise du css comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -250px;
        margin-top: -50px;
        width: 500px;
        height: 100px;
        padding:5;
        margin:0;
        border: 1px solid black;
        background-color: white;
}

Ca fonctionne pas trop mal, à un détail près : l'image est bien centrée en largeur, mais il faut remonter quand la page a été scrollée.

Je pense qu'il va falloir faire ça en js, mais étant débutant, je ne vois pas vraiment comment faire : pourriez-vous m'aider ?

Merci d'avance.

PS: si vous connaissez une bibliothèque JS qui permet de faire cela facilement, ça ne me dérange pas, bien au contraire

[nero76]

Au final, c'était tout bête, il fallait remplacer position:absolute par position:fixed dans le css !

[le_chomeur]

Attention fixed ne fonctionne pas sous ie 6 ... ( si si encore a prendre en compte )