Ventana modal

[negro1985]

Hola a todos tengo el siguiente problema, hago una ventana modal con el siguiente codigo, en el cual cargo un formulario para dar de alta en una tabla de mi bd, en la misma pagina donde se hace la ventana modal, tengo una tabla que me muestra los registros insertados en la bd, como la siguiente

Código PHP:

 <table> 
   <tr> 
       <td>NOMBRE</td> 
       <td>DOMICILIO</td> 
   </tr> 
<?php 
for($i=0;$i<$total;$i++) 
{ 
    $id = $lista[$i]['id']; 
    $nombre = $lista[$i]['nombre']; 
    $domicilio = $lista[$i]['domicilio']; 
?> 
<tr> 
<td><?php echo $nombre;?></td> 
<td><?php echo $domicilio;?></td> 
<td><a href="modificar.php?id=<?php echo $id;?>">Modificar</a></td> 
</tr> 
<?php 
} 
?> 
</table>  

ahora lo que yo necesito y quiero hacer y no he podido resolver es hacer una ventana modal para cada registro, al momento de dar clic me abra una ventana modal con el formulario para poder modificar los datos, pero no se como hacerlo, la ventana modal que muestra el formulario de alta es la siguiente

modal.css
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

#boxes .window {
position:fixed;
left:0px;
margin-top: -10px;
width:200px;
height:100px;
display:none;
z-index:9999;
padding:20px;
overflow: scroll;
}

#boxes #dialog {
width:900px;
height:550px;
margin-left: 0px;
background-color:#ffffff;
}
.close{
margin-right: 0;
font-size: 12px;
}
</style>


modal.js
<script>
$(document).ready(function() {

//select all the a tag with name equal to modal
$('#modal').click(function(e) {
//Cancel the link behavior
e.preventDefault();

//Get the A tag
var id = $(this).attr('value');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHei ght});

//transition effect
$('#mask').fadeIn(1500);
$('#mask').fadeTo("slow",0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(1500);

});

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').fadeOut(1500);
$('.window').fadeOut(500);
});

//if mask is clicked
$('#mask').click(function () {
$(this).fadeOut();
$('.window').fadeOut(1000);
});

});
</script>

lo utilizo asi

Código HTML:

<div id="boxes">
<div id="dialog" class="window curved">
<div id="main">
<form name="forma" action="alta.php">
NOMBRE<input type="text" name="nombre" />
DOMICILIO<input type="text" name="domicilio" />
<input type="submit" name="guardar" />
</form>
</div>
</div>
<div id="mask">
</div>
</div> 

Gracias de antemano a los que me ayuden a resolver este problema

[linuxzero]

Si te interesa podes, utilizar este plugin de jQuery que te permite hacer un modal de un formulario tan solo indicandole en el atributo message del metodo del modal el id del formulario.

Aca te dejo el link: http://jquery.malsup.com/block/

Sirve banda, yo lo uso para varios de los sistemas que desarrollé.

Cualquier cosa chiflá!

Saludos!

[negro1985]

Gracias bro, me podría ayudar para poder implementarlo en la tabla así como lo indico arriba

[linuxzero]

Si deberia sin problemas, en el atributo message solo deberias indicarle $('#boxex'). Con eso debería bastar.

Cualquier problema avisame ;)

Saludos!