|
|
|
Creación de una ventana pop-up a través de un link de texto
Por: Greg Alvarez
iMeil.com.mx
Marzo 10, 2005
Para este tutorial usaremos el Bloc de Notas (incluido en , en Inglés se le llama Notepad) y tu navegador favorito. Como sugiero
en el tutorial ,siempre será recomendable, y más sano,
contar con la versión más actualizada de tu navegador preferido.
Se presenta únicamente el código JavaScript pero no se hablará del mismo. El objetivo es dejarles conocer
la forma de cerar sus propias ventanas pop-up cuando se pulsa un link específico.
Basta de rollo, manos al asunto.
- Se tienen que generar las páginas. En este caso son dos:
- la página que se visita; y
- la que representa el pop-up.
- Se tiene que generar el archivo javascript. Sin embargo, lo ponemos
para descarga para evitar explicar cosas más complejas para principiantes.
Copia y pega (Copy & Paste) lo siguiente en el block de notas y asigna nombre a la página, por
ejemplo: ventana.htm
<html>
<head>
<title>Prueba de Pop-up</title>
<script language="javascript" type="text/javascript" src="codigo.js"></script>
</head>
<body>
<a href="#">Abre el pop-up</a>
</body>
</html>
es el archivo JavaScript usado para poder activar el código que se implementa en la
página 2 de este tutorial. Descárgalo dando click con el botón derecho del ratón y seleccionando "Guardar destino como"
(Save Link Target As, en inglés.)
Nota: el archivo debe ubicarse debajo del mismo directorio o carpeta que los archivos de las páginas.
<a href="#"> indica al navegador "no abrir nada cuando se pulse sobre este link". En
otras palabras, al dar click en ese link no se navega hacia una página en especial.
Copia y pega lo siguiente en el block de notas y asigna nombre a la página, por ejemplo: pop.htm
<html>
<head>
<title>Ventana Pop-up</title>
</head>
<body>
¡Hola! Ver este mensaje significa que todo ¡va de pelos!
</body>
</html>
Hasta este momento, todo luce normal, no existe nada que sea especial, a excepción de la introducción de
#
Nota: no olvides guardar ambas páginas en el mismo directorio o carpeta.
Página: 1
|
para aclarar dudas u ofrecer comentarios.
|
|
| Tutoriales |
|
