Resulta que soy algo nuevo en esto, estoy diseñando un sitio escolar, tengo conocimiento básicos de php, tengo una lista de registro proveniente de una tabla, con unas opciones de editar, eliminar y agregar, lo que quiero es que al dar clic en la opción actualizar se me muestre una venta emergente con los datos del registro seleccionado, lo habia echo anteriormente capturando la id por la url, mostrando los datos en una nueva ventana popup, esa me la se y me funciona correctamente, pero quiero darle un poco mas de profesionalismo al diseño, quiero que aparezca en una div que se muestre como una ventana modal, pero no logro realizarlo alguien me puede ayudarme.
este el codigo que he realizado
<body>
<div id="ventanainsertar" class="modalVentana" >
<div>
<a href="#cerrar" title="Cerrar" class="cerrar">X</a>
<form class="form" action="area.php" method="post">
<center>
<fieldset>
<legend class="titulo">Registro de Areas</legend>
<ul style="list-style-type:none;">
<li><label >Nombre del area: </label>
<input class="textbox" type="text" name="nombre_area" title="Debe ingresar nombre del area" required />
</li>
<center>
<br />
<input type="submit" value="Guardar Registro" name="guardar" />
</center>
</ul>
</fieldset>
</center>
</form>
</div>
</div>
<?php
include("conexion.php");
$consulta="SELECT * FROM area";
$resultado=mysql_query($consulta,$conexion);
?>
<center>
<div id="contenedor">
<table>
<tr>
<td align="center" > <a href="#ventanainsertar"><img src="imagenes/btmas.png" /></a></td>
<td colspan="4"> Presione click sobre el icono para adicionar nuevo registro</td>
<tr>
<th>Id</th>
<th>Nombre del Area</th>
<th>Actualizar</th>
<th>Eliminar</th>
</tr>
<?php
while ($fila=mysql_fetch_array($resultado))
{
echo "<td align = center>".$fila['idarea'];
echo "<td>".$fila['nombre_area'];
?>
</center>
<script language="javascript">
function confirmar ( mensaje ) {
return confirm( 'Desea eleminar el registro seleccionado.?' );
}
</script>
<td align="center"><a onClick="window.open('actualizar_area.php?ide=<?php echo $fila['idarea'] ?>','','width=650, height=200, left=400, top=300')"><img src="imagenes/btedita.png"</a>
<td align="center"><a onClick="return confirmar()" href="eliminar_area.php?ide=<?php echo $fila['idarea'] ?>"><img src="imagenes/btborra.png" </a>
<tr>
</div>
<?php
}
echo "LISTADO DE AREAS ACADEMICAS";
mysql_close($conexion);
?>
</body>
