Abrir ventanas o Popups con javascript

Manuales de Javascript > Taller Programación en Javascript

A veces necesitamos abrir ventanas (Popups) con javascript he aquí varias maneras de hacerlo.

A continuación te pongo las funciónes de javascript y mas abajo te digo como usarlas.

Función No. 1

Función sencilla

function abrir_ventana(url)
{
newWindow = window.open(url,"ventana4",
"status,height=600,width=850,top=150,left=250,scrollbars=yes");
newWindow.focus( );
};

En "width" ponemos el ancho de la ventana que queramos abrir.
En "height" ponemos la altura.

Función No. 2

Función con el manejo de mas opciones.

function abrir_ventanax(direccion, pantallacompleta, herramientas, direcciones, estado, barramenu, barrascroll, cambiatamano, ancho, alto, izquierda, arriba, sustituir){
     var opciones = "fullscreen=" + pantallacompleta +
                 ",toolbar=" + herramientas +
                 ",location=" + direcciones +
                 ",status=" + estado +
                 ",menubar=" + barramenu +
                 ",scrollbars=" + barrascroll +
                 ",resizable=" + cambiatamano +
                 ",width=" + ancho +
                 ",height=" + alto +
                 ",left=" + izquierda +
                 ",top=" + arriba;
     var ventana = window.open(direccion,"venta",opciones,sustituir);

}

En esta función podemos escoger que se muestre o no en pantalla completa, la barra de herramientas, la barra de estado, el menu, que sea fija o se pueda maximizar el tamaño, el ancho la altura y a cuantos pixeles de arriba y de la izquierda queremos que aparezca nuestra pantalla o popup.

Ejemplo 1

Ejemplo 2

El orden de los valores que ponemos es en el siguiente orden direccion, pantallacompleta, herramientas, direcciones, estado, barramenu, barrascroll, cambiatamano, ancho, alto, izquierda, arriba, sustituir

<script language="javascript">

/*Escribimos la función antes de poner el link*/

function abrir_ventanax(direccion, pantallacompleta, herramientas, direcciones, estado, barramenu, barrascroll, cambiatamano, ancho, alto, izquierda, arriba, sustituir){
     var opciones = "fullscreen=" + pantallacompleta +
                 ",toolbar=" + herramientas +
                 ",location=" + direcciones +
                 ",status=" + estado +
                 ",menubar=" + barramenu +
                 ",scrollbars=" + barrascroll +
                 ",resizable=" + cambiatamano +
                 ",width=" + ancho +
                 ",height=" + alto +
                 ",left=" + izquierda +
                 ",top=" + arriba;
     var ventana = window.open(direccion,"venta",opciones,sustituir);
    };
</script>

<a href="javascript:abrir_ventanax('http://google.com','no','yes','yes','yes','yes','yes','yes','800','600','100','100','yes')">
Ejemplo 2: Abrir google en una ventana modificando sus parametros
</a>

Ejemplo 2: Abrir google en una ventana modificando sus parametros