Pop up con HTML

Posteado el 27. Aug, 2010 por tuto in Desarrollo Web, HTML y CSS

En este tutorial aprenderás como hacer un pop up partiendo de un HTML en nuestro ejemplo seleccionamos el icono de Google voice para hacerlo. Esperamos sea de tu utilidad

Aqui puedes ver un demo online de lo que haremos aqui

Como se observa en el código al darle click a la imagen llama a un archivo llamado popup.html el cual vamos a crear a continuación.

Pop up con HTML

PASO 6
Con el comando Ctrl + S vamos a crear un nuevo documento HTML en blanco.

Pop up con HTML

PASO 7
Desde la carpeta imágenes vamos a arrastrar la imagen que queremos que salga en el Pop Up.

Pop up con HTML

PASO 8
Ahora con el comando Ctrl + S vamos a guardar nuestro HTML con el nombre popup.html dentro de la carpeta popup que creamos al principio.

Pop up con HTML

PASO 9
Listo ya tenemos nuestro efecto terminado.

Pop up con HTML

Descarga el editable de pop up con HTML

PASO 1

Creamos una carpeta nueva llamada popup y dentro de ella creamos una nueva carpeta llamada imágenes dentro de la cual vamos a colocar las imágenes que vamos a utilizar.

Pop up con HTML

PASO 2

Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

Pop up con HTML

PASO 3

Con el comando Ctrl + S guardamos nuestro documento dentro de nuestra carpeta popup con el nombre “pop up im.html”

Pop up con HTML

PASO 4

Ahora vamos a copiar el siguiente código dentro de nuestro HTML debajo de las etiquetas .

Code block

<script>
function abrir(url) {
open(url,'','top=0,left=0,width=515,height=515') ;
}
</script>
<style type="text/css">
<!--
blockquote{
			}
		img{
			border:none;
			}
		hr{
			display:none;
			}
-->
</style>

Pop up con HTML

PASO 5
Dentro de las etiquetas vamos a copiar el siguiente código.

Code block

<div align="center"><a href="javascript:abrir('popup.html')"> <img src="imagenes/boton.jpg" alt="Pop Up en HTML" width="500" height="500" /></a></div>