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é :
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.
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()' />
Pour l'instant, j'utilise du css comme ceci:
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.
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; }
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
Partager