Cómo hacer un pop-up con JavaScript
Muchos de nuestros usuarios nos consultaron sobre
cómo implementar un pop-up en su sitio para que se abra en forma automática al iniciar
la página, o simplemente a través de un enlace.El lenguaje que vamos a utilizar para
realizarlo es nada más y nada menos que JavaScript.
Abrir un ventana a través de un enlace
Esta opción es realmente útil para mostrar algún tipo de información fuera del sitio.
Un ejemplo claro puede ser nuestra sección de Downloads, en la cual antes de comenzar la
descarga de un programa se abre una pequeña ventana informando que se inició la descarga
y si no comienza se ofrece la posibilidad de clickear sobre el enlace directo al archivo
para descargarlo con el Mass Downloader, GetRigth o simplemente desde el navegador.
JavaScript: se ubica entre las etiquetas <head> y
</head>:
<html>
<head>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body>
<a href="javascript:Abrir_ventana('popup.html')"><font size="1" face="Verdana">Click aquí para abrir la ventana</font></a>
</body>
</html>
En el script anterior, se puede observar el código
fuente de la función encargada de abrir la ventana, y dentro del cuerpo de la página
(<body>) el enlace que llama a dicha función.
Abrir una ventana automáticamente
Es muy común ingresar a un sitio y ver que se abre una ventana en forma
automática. Para ello utilizaremos el mismo script que el anterior pero con la diferencia
de agregar un tag en el <body> para que se ejecute la función al iniciar la carga
de la página.
<html>
<head>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body onload="Abrir_ventana('popup.html')">
</body>
</html>
Aclaraciones
Notamos que en la función se puede configurar las opciones de la ventana que se
va a abrir. Algunas de ellas son la posibilidad de mostrar o no la barra de herramientas,
la de direcciones, la de status, la de menúes, las de desplazamiento, si se permite o no
la posibilidad de cambiar el tamaño, y las medidas de la ventana.
function Abrir_ventana (pagina) {
var opciones= "toolbar=no,
location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes,
width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
|
