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
