Creacion de pop-ups 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.
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);
}