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 :
- <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 :
- #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
Message édité par nero27 le 14-07-2009 à 18:53:03