TUTORIALES JAVASCRIPT

Centrar Ventana PopUp

por elQuique

Bien javascript es un lenguaje a nivel de cliente esto es que a diferencia de PHP que se ejecuta en el servidor el JS se ejecuta en el browser de quien esta mirando la pagina web en ese momento.

Eso es justo lo que necesitamos para este caso smile.gif ya que debemos hacer que en cada pantalla segun su medida centre la ventana.

Tu ya debes tener de hecho un JS que llame a tu popup, en este caso nos centraremos en el html y JS de tu ventana o sea la que se abre.

Debes tener algo como

que se abre con el tamaño indicado por la orden window de tu rutina de popup.

a ese html que por supuesto debe ser mas grande le vamos a agregar un JS. Por ejemplo este:

hemos agregado la funcion posicion que lo que hace es moverlo a la parte superior izquierda (0, 0) por medio de la orde JS moveTo y esta orden se llama cuando se carga la pagina html, debido a que hemos colocado su llamado en el evento onload del body html ( ).

La diferencia esta en que tu quieres centarlo, eso quiere decir que debe quedar un espacio IGUAL a ambos lado de tu ventana. O sea que dicho de otra forma del ancho total de tu pantalla le debe sobrar el mismo espacio en ambos lados de tu ventana.

Por ejemplo si la pantalla mide 800x600 y tu ventana 300px de ancho debe dejar (800 - 300) / 2 para cada lado = 250 ok ??

Ancho de la Pantalla - Ancho (es el espacio sobrante total) a eso lo dividimos entre 2, / 2 (porque es para ambos 2 lados)

Ahora un pequeño problema, quien mire tu web tendra 800 o 1024 o 1280 ??? Por suerte JS tiene una funcion que soluciona esto y nos dice el tamaño se llama screen.width traducido al español pantalla ancho

Cambiemos nuestra formula entonces asi

(screen.width - AnchoVentana) / 2

por tanto si queremos que quede centrada horizontal nuestra pagina deberia ser asi

Use una variable llamda x para que quede mas facil de razonar y como AnchoVentana he colocadola cantidad fija 300 que es el supuesto ancho de tu ventana si no es asi lo cambias

Listo cualquier duda a las ordenes

pd: si quieren centrado vertical agregan

tomando que el alto fuera 200

Lo pueden ver funcionando aquí

Espero les sirva, saludos