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);
}

Deja un comentario