Cómo crear ventanas emergentes (Pop Up Windows)

Las ventanas emergentes o Pop Up Windows son uno de los scripts más simples y usados de Javascript por los webmasters. Permiten abrir el contenido de una página dentro de una ventana en la que se puede controlar el tamaño de la misma así como otras características como el tipo de scroll, la habilitación o deshabilitacion de la barra de herramientas, menú, dirección, etc.

Para implementar una ventana de este tipo dentro de una página web (ya sea ASP o HTML) es necesario incluir unas cuantas instrucciones en código Javascript. Estas líneas se ingresan dentro del código de la página inmediatamente después de la etiqueta <head>. Asímismo deberá agregar una pequeña instrucción en cada liga desde donde desea llamar la ventana emergente.

Antes de iniciar es necesario definir algunos parámetros que nos permitirán controlar las características de la ventana. A continuación se detalla en una tabla cada uno de estos parámetros:

location = yes o no Habilita o deshabilita la barra de direccion
scrollbars = yes o no Habilita o deshabilita la barra de desplazamiento (scroll)
toolbar = yes o no Habilita o deshabilita la barra de herramientas
menubar = yes o no Habilita o deshabilita la barra de menú
resizable = yes o no Habilita o deshabilita la modificación del tamaño de la ventana
width = Define el ancho (en pixeles)
height = Define la altura (en pixeles)

Ahora que ya conocemos la función de cada parámetro, vamos a conocer el script, que cómo comentamos anteriormente deberá ingresarse dentro del código de la página inmediatamente después de la etiqueta <head>. Veamos un ejemplo del código:

<script language="JavaScript"
//Primero definimos la funcion que abre la ventana emergent
function CrearVentana()
{
window.open('ejemplo.htm', 'muestraVentana',
'width=300, height=300, menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no')
}

</script>

Finalmente, para llamar este script se puede utilizar cualquiera de los siguientes tres criterios:

Desde una liga de texto:

Código:
<a href="javascript:CrearVentana()">
Ver
</a>

Ejemplo:

Ver

Desde una liga de imágen: Código:
<a href="javascript:CrearVentana()">
<img src="imagen.gif" width="40" height="15" border="1">
</a>

Ejemplo:

Desde un botón: Código:
<form>

<input type="button" value="Ver" onclick="CrearVentana()">

</form>
Ejemplo: