Como hacer popups

Los popups son herramientas muy utiliadas, ya que nos permiten de manera rapida mostrar una que otra información sin tener que cargar una página completa. Aquí les traigo un tutorial sobre como hacer los popup de manera que lo puedan costumizar a su gusto. Además, también les eseño como centrar un popup con realción a la pantalla.

Los popups son herramientas muy utilizadas, ya que nos permiten de manera rapida mostrar una que otra información sin tener que cargar una página completa. Aquí les traigo un tutorial sobre como hacer los popup de manera que lo puedan costumizar a su gusto. Además, también les eseño como centrar un popup con realción a la pantalla.

Creando el popup

Muchos pueden llegar a pensar que hacer un popup es cosa de otro mundo, pero no es así. Es tan sencillo que ni se lo imaginan. Aquí esta el código para crear un popup super sencillo, en el cual vamos a abrir una página cualquiera:

JavaScript Code:
Este script de lo ponermos a cualquier elemento que queramos para que el usuario solo tenga que hacer click. Por lo general se coloca en el tag <a>:

HTML Code:
También se puede hacer de la siguiente manera:
HTML Code:
Ven que fácil es todo. Claro, que como dice el link, esto es un popup predeterminado, es decir, solo lo puedes usar una vez ya que en el JavaScript espcificaste el URL que se va a abrir, el nombre de la ventana, el tamaño de la ventana, la posición de la ventana y las características que este posee. El script se puede modificar de manera que, al llamar la función le pases todas estas especificaciones.

Creando un popup costumizado

Ahora les enseñare como hacer una función reutilizable. Todo es igual, sólo que ahora vamos a utilizar variables para darle forma a nuestro popup. Utilizamos el siguiente script:

JavaScript Code:
Fijense que ahora la función requiere el URL que se mostrará en el popup, el nombre del popup, el ancho, el alto del popup, la distancia del popup con respecto al lado izquierdo y el lado superior de la pantalla y finalmente las características que la ventana tendrá. Para utilizar el popup ahora hacemos:

HTML Code:
Con esos valores que le pasamos a la función tendremos el mismo efecto que el popup predeterminado. Sólo que ahora puedes cambiarle lo que quieras.

Centrando el popup

Algo que muchos quieren hacer, pero que pocos podemos lograr: centrar el popup en la pantalla, con respecto a la pantalla. Sin embargo, sólo hay unas cuantas diferencias entre este script y el anterior. Las más notables son que ahora no tenemos que pasarle a la función la posición de la ventana, y al script le añadimos dos líneas de cálculos:

JavaScript Code:
A las variables de izq y arr le vamos a dar os valores necesarios para centrar el popup. ¿Cómo? Sencillo. Lo que hacemos es tomar el ancho de la pantalla, restarle el ancho del popup y ese resultado dividirlo por dos. Lo mismo para arriba. Es matemática simple, pero el resultado es que ya tenemos el popup centrado:

HTML Code:
Eso es todo. Espero que lepuedan dar uso práctico a este tutorial. Personalmente creo que es fácil y sencillo de entender y aplicar.