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:
|
