Centrar div en el centro de la pantalla con js

Marti1982 · #1 (**permalink**) 10/12/2009, 05:56

Hola, ya se que esta pregunta esta resuelta, de hecho yo lo he conseguido, pero lo que quiero exactamente es que el div en cuestion que se muestra se centre en medio de la pantalla que esta viendo el usuario en ese momento, independientemente de si el usuario esta en el header o si esta en el footer.

Tengo un enlace bastante abajo del documento, y para que se vea el div que muestra, tengo que usar href="#" para enviar al usuario al "top" de la pagina... Lo que querria es que se mostrara en el centro de la pantalla que esta viendo en ese momento.

Desde ya gracias.

Panino5001 · #2 (**permalink**) 10/12/2009, 06:16

Probá:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

<script>

function getWindowData(){

    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;

    if (typeof window.innerWidth != 'undefined'){

        widthViewport= window.innerWidth-17;

        heightViewport= window.innerHeight-17;

    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){

        widthViewport=document.documentElement.clientWidth;

        heightViewport=document.documentElement.clientHeight;

    }else{

        widthViewport= document.getElementsByTagName('body')[0].clientWidth;

        heightViewport=document.getElementsByTagName('body')[0].clientHeight;

    }

    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);

    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);

    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);

    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);

    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];

}

function abrir(W,H){

    var pagina=getWindowData();

    document.getElementById('capa').style.width=W+'px';

    document.getElementById('capa').style.height=H+'px';

    document.getElementById('capa').style.top=(pagina[1]/2)-(H/2)+pagina[3]+'px';

    document.getElementById('capa').style.left=(pagina[0]/2)-(W/2)+pagina[2]+'px';

 
}

function cerrar(){

    document.getElementById('capa').style.left='-1500px';

}

</script>

</head>

 
<body>

<form action="" method="get">

<input type="button" value="abrir" onclick="abrir(200,300)" />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<label for="Submit"></label>

<input type="button" name="Submit" value="abrir" id="Submit" onclick="abrir(400,300)" />

</form>

<div id="capa" style="background-color:#F00; position:absolute; left:-1500px" onclick="cerrar()">click para cerrar</div>

</body>

</html>

Marti1982 · #3 (**permalink**) 10/12/2009, 06:19

Gracias Panino5001, ahora mismo me pongo a trastear y te cuento el resultado, saludos!

Marti1982 · #4 (**permalink**) 10/12/2009, 06:26

Es justo el resultado que quiero, ahora a ver si lo puedo adaptar a mi codigo, ya que estoy trabajando con jquery.

De nuevo mil gracias