boxy ventanas modales tipo facebook

chalchis · #1 (**permalink**) 03/01/2010, 12:52

hola amigos tengo un problema estoy
usando el este script boxy

http://onehackoranother.com/projects/jquery/boxy/

mi script en el index para crear la ventana modal

Código:

<input type="button" name="nw2" id="nw2" value="galeria" class="btn" onclick='Boxy.load("partial.html",{title:"Galeria",modal:false,draggable: false});' />

ahora el script indica que para cargar un archivo externo debo crear el contenido pero
sin encabezados lo que hice fue crear dentro de partial.html un iframe quedando asi

partial.html

Código:

<div style='background-color: blue; height: 200px; width: 400px; padding: 15px; color: white; font-size: 30px' id="vistaform"> 
 <iframe name="ifrupload" width="200px" scrolling="No" height="200px" marginheight="0" frameborder="0" marginwidth="0" src="form.html" ></iframe>  
</div>

comom pueden ver dentro del iframe cargo el archivo real que deseo trabajar el
form.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head>
<body>
<form id="form1" name="form1" method="post" action="">
Registro
<input name="tx_uno" id="tx_uno" type="text" /><br />
Registro
<input name="" type="text" /><br />
Registro
<input name="" type="text" />
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
<input type="button" value="cerrar6" onclick=''  />
</form>
</body>

mi pregunta como puedo cerrar la ventana modal pero desde el iframe ose
desde form.html

espero sus comentarios amigos
saludos!!

chalchis · #2 (**permalink**) 05/01/2010, 12:56

solucionado de esta manera

en el archivo index.html se crea el el boton que genera la ventana modal boxy
y creamos la funcion que hara ese proceso asi como el cierre de la ventana desde el
iframe

Código:

<head>

</head>
<body>
<input name="add" value="crear box" type="button" onclick='crear_modal()' /> 
<-- aqui se crea el div que se invocara y dentro de ella un iframe-->

<div id='foobar' style='display: none; background-color: green; color:
white; font-size: 30px; color: white; padding: 15px; height: 400px;
width: 400px;'>
  <iframe name="ifrupload" width="400px" scrolling="No" height="200px"
marginheight="0" frameborder="0" marginwidth="0" src="form.html" ></
iframe> 
  </div>
 
</body>

en el head

Código:

function crear_modal()
{
//#foobar es el div contenedor que tiene el iframe
   
new Boxy(jQuery('#foobar'),{title: "modal add", modal: false,
closeable: true, closeText: "cerrar"});

}

//esta función sera invocada desde el iframe para cerrar la ventana boxy
function cerrar_remoto()
{
   var self = document.getElementById('foobar');
   Boxy.get(self).hide();
}

en el archivo form.html

Código:

<body>
<form name="formulario" method="post" action="">
Registro
<input name="" type="text" />
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
<input type="button" value="cerrar_final_add" id="txcerrarUno"
onclick='self.parent.cerrar_remoto()'  />//este boton llamara la funcion que esta en index.html para cerrar la ventana
modal boxy
</form>
</body>

y listo me ha funcionado excelente

saludos!!1