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

Creacion de pop-ups con javascript was last modified: junio 3rd, 2019 by Atlantica Digital