Afficher une div centrée en hauteur sur une page scrollée
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:
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:
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 :)
