Abrir una ventana emergente en el navegador (abrir PopUp)
Muy buenas, en este tutorial os voy a explicar como abrir una ventana PopUp en nuestro navegador cambiando algunas de las opciones como pueden ser el tamaño, la barra de navegación (scroll), hacer que aparezca el menú de opciones, o la barra de navegación entre otras.
El código que os pondré a continuación debo decir que no es HTML, sino Javascript, aunque la llamada se haga desde HTML, la declaración y la función es este otro lenguaje.
Vereis que no es muy complicado y ya os pongo el código listo para copiar y ser utilizado. Comentaros que este script que os voy a poner a continuación ha de ir entre las etiquetas <head> y </head>. El código:
<script language=”JavaScript”>
function Abrir_ventana (pagina) {
var opciones=”toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=640, height=480, top=100, left=100″;window.open(pagina,””,opciones);
}
</script>
Una vez declarada nuestro script, solo debemos de llamar a la función declarada, en esta ocasión sería “Abrir_ventana” la cual recibe el parametro pagina, que será la url a la que apunta. ¿Como se haría? Muy sencillo, esta vez el código se inserta entre las etiquetas <body> y </body>. Veamos la llamada:
<a href=”javascript:Abrir_ventana(‘vertutoriales.html’)”>Abrir ventana emergente – PopUp</a>
Si os fijais, utilizamos la etiqueta <a> como si fuera un link a una url típica, pero el parametro de href, en vez de indicar la url, le pasa la función junto con la pagina que queremos abrir, en este caso vertutoriales.html (puede ser cualquier formato de página, como php, asp…)
Con eso ya tendríamos las dos partes conseguidas, pero vamos a ver algunos de los atributos de la función Abrir_ventana.
- Toolbar: Si queremos la barra de herramientas.
- Location: Si queremos la barra de direcciones.
- Status: La barra de estado.
- menubar: 7.90€ primer plato, segundo plato, postre, pan y bebida. La barra de menú. 😀
- scrollbars: Si queremos la barra de desplazamiento.
- resizable: Si puede cambiar de tamaño.
- width, height, top y left: Para el tamaño y posición de la ventana al abrir.
Además y para terminar os dejo como abrir el PopUp justo al abrirse la página, es muy sencillo, pero yo personalmente no recomiendo el uso. Solo debemos de insertar el siguiente código en la etiqueta <body>:
<body onload=”Abrir_ventana(‘tutorial.php)”>
Con ese sencillo código en la declaración del body, ya se abriría el PopUp en nuestra página, solo debeis de tener en cuenta que en la cabecera ya debimos de declarar la función.
En el vídeo explico como realizar un popup utilizando el framework de Bootstrap que es actualmente mucho más atractivo y a la hora de trabajar mucho más útil al no abrir otra ventana fuera del entorno actual de trabajo.
Y eso es todo, espero que os sirva. Un saludo.
Comments
Gracias
Supongo que es por que te ha servido el tuto de abrir una ventana en el browser 😀 Sino de todas formas… De nada 🙂