Pop-up para un texto

jonatan10 · #1 (**permalink**) 30/09/2003, 17:55

Hola, quería saber como puedo hacer para habrir una ventana pop-up con por ejemplo, los datos de una persona, es decir; que si yo presiono en un link (texto) se abra una ventana con los datos de la persona señalada en este. La ventana que quiero abrir sería personalizada, es decir, fondo negro y tdo lo demas demas, y del tamaño que ocupe todo el texto.
Por favor, les pido que me contesten.
Atte. Jonatan

bleid · #2 (**permalink**) 30/09/2003, 19:13

Por ejemplo tienes 5 nombres

y quieres que al dar click en uno se abra una pagina con los datos de este, si es eso puedes pones una pagina para cada perona y puedes usar algo como esto:

<form name="form1">
<p><select name="Nombres" size="1">
<option selected></option>
<option>Menganito</option>
<option>Pepito</option>
<option>Pancho</option>
<option>Tu</option>
<option>Yo</option>
</select></p>
</form>

y al seleccionar el nombre te abra un pop-up.

jonatan10 · #3 (**permalink**) 30/09/2003, 21:56

Hola, justo es exactamente lo que quiero hacer, pero no entendí mucho lo que tengo que hacer. Te entendí hasta que tengo que hacer una página para cada uno, pero despues... que hago, donde lo pongo eso, que es lo que tengo que corregir de ahi??.

Atte. Jonatan
Muchas gracias

KarlanKas · #4 (**permalink**) 01/10/2003, 04:14

Hola jonatan!!

He estado mirando un poco como ayudarte y se me ha ocurrido una forma que tal vez parezca un poco complicada pero en realidad es muy sencilla. si te parece te pongo el código y luego te lo comento.

Código PHP:

  <html> 
<head> 
     
    <script> 
//----------- NO TOCAR ---------------- 
function personaje(nombre,mote,nacimiento,lugar,pais){ 
    this.nombre=nombre; 
    this.mote=mote; 
    this.nacimiento=nacimiento; 
    this.lugar=lugar; 
    this.pais=pais; 
    } 
     
    var miembro=new Array(); 
//------------ya PUEDES TOCAR 
    //Propiedades de la ventana 
    fondo="black"; 
    //Fuente de la ventana 
    tipo="verdana"; 
    tamano="12"; 
    color="white"; //también pouede ponerse en código hexadecimal (#ffffff;) 
    tono="normal"; //puede ser normal, bold, italic... 
     
    //tamaño de la ventana 
    ancho="250"; 
    alto="120"; 
     
    x=(screen.width-ancho)/2; 
    y=(screen.height-alto)/2; 
     
    //lista de miembros 
    //sintaxis: miembro[n]=new personaje(Nombre,Mote,Fecha de nacimiento,lugar de residencia,Pais); 
 
    miembro[0]=new personaje("Pepito","El Pepe","11/1/1972","Madrid","España"); 
    miembro[1]=new personaje("Walter","Matafeos","1/21/1982","Valencia","España"); 
 
     
    //Pon todos los que creas conveniente 
     
    function mostrar(numero){ 
    persona=miembro[numero]; 
    ficha=window.open('about:blank','ficha','width='+ancho+',height='+alto+',top='+y+',left='+x); 
    ficha.document.writeln("<html><head>"); 
    ficha.document.writeln("<title>ficha de "+persona.mote+"</title>"); 
    ficha.document.writeln("<style>"); 
    ficha.document.writeln("td{"); 
    ficha.document.writeln("color:"+color+";"); 
    ficha.document.writeln("font:"+tono+" "+tamano+"px/"+tamano+"px "+tipo+";"); 
    ficha.document.writeln("}"); 
    ficha.document.writeln("</style>"); 
    ficha.document.writeln("</head><body bgcolor='"+fondo+"'>"); 
    ficha.document.writeln("<table>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Nombre</td><td>"+persona.nombre+"</td>"); 
    ficha.document.writeln("</tr>"); 
         
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Mote:</td><td>"+persona.mote+"</td>"); 
    ficha.document.writeln("</tr>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Fecha de Nacimiento:</td><td>"+persona.fecha+"</td>"); 
    ficha.document.writeln("</tr>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Lugar de Residencia:</td><td>"+persona.nacimiento+"</td>"); 
    ficha.document.writeln("</tr>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Pais:</td><td>"+persona.pais+"</td>"); 
    ficha.document.writeln("</tr>"); 
    ficha.document.writeln("</table>"); 
    ficha.document.writeln("</body></HTML>"); 
    } 
    </script> 
</head> 
 
<body> 
<script> 
for(a=0;a<miembro.length;a++){ 
document.write("<A HREF='javascript:mostrar("+a+");'>"+miembro[a].nombre+"</A><br><br>"); 
} 
</script> 
 
 
</body> 
</html>

En Propiedades de la ventana definimos los distintos aspectos de la pop up que se va a abrir, así fondo es el color de fondo y propiedades de la fuente son los distintos aspectos de la letra. El tamaño está definido en pixels.

Luego en Tamaño de la ventana definimos el tamaño de la pop up en pixels. El código de abajo no lo toques, es para centrar la ventanita.

Por fín pasamos a la enjundia. Para añadir un nuevo miembro pon
miembro [el número que toque empezando pro el cero]=new personaje("nombre entre comillas","su mote entre comillas","fecha de nacimiento entre comillas","lugar de residencia entre comillas","pais de residencia entre comillas");

Puedes añadir todos los que quieras. En caso de que quieras poner otros datos o añadir más el cambio es fácil, pero te lo explico en otro mensaje una vez me digas si te sirve o no lo uqe te pongo.

Luego la misma página se encarga de todo: pone la lista de los miembros con enlace a la popup. Revisalo y dime si te sirve.

Un saludo!!

jonatan10 · #5 (**permalink**) 01/10/2003, 10:58

Hola KarlanKas, muchisimas gracias!! era lo que buscaba.
Por otro lado, quería saber como puedo hacer para que a esa ventana con todos los datos y demas, le pueda poner una foto (pequeña).

Atte. Jonatan

KarlanKas · #6 (**permalink**) 01/10/2003, 11:36

Hola Jonatan!!

No veas como me alegra haber dado en el clavo. Pero esos son los datos que buscas? Si quieres los podemos cambiar.
Ahora me tengo que ir, pero en 3 horas te pongo lo de la foto.

Un saludo!

jonatan10 · #7 (**permalink**) 01/10/2003, 13:41

Si, es justito lo que andaba buscando, estan bien todos los datos. Aparte de lo de la foto, si no es mucho pedir, como puedo hacer para saber en donde estan las cosas que puse. Porque yo uso el FrontPage y este tiene dos vistas la 1° donde vos haces todas las cosas y la 2° que es para ver como quedó, bueno yo solamente la puedo ver en la segunda y no me permite hacer más facil la página, entendes?. Bueno, igualmente te repito que es justo lo que andaba buscando si no podes con eso no importa, con lo de la foto me conformo.
Muchisimas gracias.
Atte. Jonatan

KarlanKas · #8 (**permalink**) 01/10/2003, 16:21

Mira a ver si te sirve esto:

Código PHP:

   
<html> 
<head> 
     
    <script> 
//----------- NO TOCAR ---------------- 
function personaje(nombre,mote,nacimiento,lugar,pais,foto){ 
    this.nombre=nombre; 
    this.mote=mote; 
    this.nacimiento=nacimiento; 
    this.lugar=lugar; 
    this.pais=pais; 
    this.foto=foto; 
    } 
     
    var miembro=new Array(); 
//------------ya PUEDES TOCAR 
    //Propiedades de la ventana 
    fondo="black"; 
    anchoFoto=50; 
    altoFoto=100; 
    //Fuente de la ventana 
    tipo="verdana"; 
    tamano="12"; 
    color="white"; //también pouede ponerse en código hexadecimal (#ffffff;) 
    tono="normal"; //puede ser normal, bold, italic... 
     
    //tamaño de la ventana 
    ancho="300"; 
    alto="120"; 
     
    x=(screen.width-ancho)/2; 
    y=(screen.height-alto)/2; 
     
    //lista de miembros 
    //sintaxis: miembro[n]=new personaje(Nombre,Mote,Fecha de nacimiento,lugar de residencia,Pais,ruta de la foto); 
 
    miembro[0]=new personaje("Pepito","El Pepe","11/1/1972","Madrid","España","img/pepe.jpg"); 
    miembro[1]=new personaje("Walter","Matafeos","1/21/1982","Valencia","España","http://www.fotos.com/foto.gif"); 
 
     
    //Pon todos los que creas conveniente 
     
    function mostrar(numero){ 
    persona=miembro[numero]; 
    ficha=window. open('about :blank','ficha','width='+ancho+',height='+alto+',top='+y+',left='+x); 
    ficha.document.writeln("<html><head>"); 
    ficha.document.writeln("<title>ficha de "+persona.mote+"</title>"); 
    ficha.document.writeln("<style>"); 
    ficha.document.writeln("td{"); 
    ficha.document.writeln("color:"+color+";"); 
    ficha.document.writeln("font:"+tono+" "+tamano+"px/"+tamano+"px "+tipo+";"); 
    ficha.document.writeln("}"); 
    ficha.document.writeln("</style>"); 
    ficha.document.writeln("</head><body bgcolor='"+fondo+"' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>"); 
    ficha.document.writeln("<table>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td rowspan='5'><img width='"+anchoFoto+"' height='"+altoFoto+"' src='"+persona.foto+"'></td><td>Nombre</td><td>"+persona.nombre+"</td>"); 
    ficha.document.writeln("</tr>"); 
         
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Mote:</td><td>"+persona.mote+"</td>"); 
    ficha.document.writeln("</tr>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Fecha de Nacimiento:</td><td>"+persona.fecha+"</td>"); 
    ficha.document.writeln("</tr>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Lugar de Residencia:</td><td>"+persona.nacimiento+"</td>"); 
    ficha.document.writeln("</tr>"); 
     
    ficha.document.writeln("<tr>"); 
    ficha.document.writeln("<td>Pais:</td><td>"+persona.pais+"</td>"); 
    ficha.document.writeln("</tr>"); 
    ficha.document.writeln("</table>"); 
    ficha.document.writeln("</body></HTML>"); 
    } 
    </script> 
</head> 
 
<body> 
<script> 
for(a=0;a<miembro.length;a++){ 
document.write("<A HREF='javascript:mostrar("+a+");'>"+miembro[a].nombre+"</A><br><br>"); 
} 
</script> 
 
 
</body> 
</html>

El tamaño de la foto la defines con altoFoto y anchoFoto y ahora pones la ruta de la foto al final de todos los demás datos.

Dime que tal...

Un saludo!

PD.- No entiendo lo que quieres decir con lo de las cosas que pusiste... puedes explicarte un poco más? Muchas gracias!

jonatan10 · #9 (**permalink**) 01/10/2003, 17:54

La verdad que esta ESPECTACULAR

, muchisimas gracias

por ayudarme con este problema, quedó como me lo imaginaba.

Lo otro que te decía antes era que yo trabajo con FrontPage, y este tiene tres formas de ver lo que estas haciendo. Una es en la que trabajas "normal"; en la segunda ves los codigos html y demas; y en la tercera es la vista en la que ves como esta quedando "simulando" como quedaría colgada en la web. Lo que pasa es que en la vista "normal" no se ve nada (una vez que puse el codigo y todo lo demas), es decir, yo no veo lo que en realidad puse, de este modo no puedo calcular con los otros objetos que tengo que poner en la página. Lo veo perfectamente en el tercer modo, en el que la veo segun como quedaría en la web, pero no en el primero. no se si me explico, es muy complicado de explicar; si no no importa ya me ayudaste mucho.

Atte. jonatan

jonatan10 · #10 (**permalink**) 01/10/2003, 17:58

Una cosa más tengo otro problema, lo puse en la sección de PHP, y como vos sabes bastante quería que si podes te fijes eso. Esta en la dirección: http://www.forosdelweb.com/showthrea...hreadid=156620

Atte. Jonatan

KarlanKas · #11 (**permalink**) 02/10/2003, 00:56

Me alegro de que te sirviera el código. Respecto a tu problema con el FP no sé a qé puede deberse, te recomiendo que pongas tu pregunta en el foro de Editores de Páginas Web, tal vez a alguien le haya pasado lo mismo y te sepa ayudar.

Y gracias por tanto piropo, ya me gustaría saber tanto como pretendes, sé un poquito de JS y con eso me defiendo. De cualquier forma miro tu otra consulta.

Un saludo y me alegro de haberte sido de utilidad.

KarlanKas · #12 (**permalink**) 02/10/2003, 00:57

Por cierto, traslado esto de HTML a JS