Afficher une div centrée en hauteur sur une page scrollée

Afficher une div centrée en hauteur sur une page scrollée - HTML/CSS - Programmation

Marsh Posté le 14-07-2009 à 18:42:34    

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. <script type='text/javascript'>
  2. function afficheBox() {
  3.      $('box').innerHTML='osef';
  4.      $('box').style.display='block';
  5. }
  6. </script>
  7. <div id='box' style='display: none;'>
  8. <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. #box {
  2.         position: absolute;
  3.         top: 50%;
  4.         left: 50%;
  5.         margin-left: -250px;
  6.         margin-top: -50px;
  7.         width: 500px;
  8.         height: 100px;
  9.         padding:5;
  10.         margin:0;
  11.         border: 1px solid black;
  12.         background-color: white;
  13. }


 
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 :jap:


Message édité par nero27 le 14-07-2009 à 18:53:03
Reply

Marsh Posté le 14-07-2009 à 18:42:34   

Reply

Marsh Posté le 14-07-2009 à 23:34:19    

position:fixed au lieu de position:absolute ?

Reply

Marsh Posté le 15-07-2009 à 00:03:57    

Ah, super, je ne connaissais pas et effectivement, c'est exactement ça qu'il me fallait :jap:
 
 [:spikler]

Reply

Marsh Posté le 15-07-2009 à 10:08:36    

A ton service ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed