como mostrar un popup que muestre un resultado de una consulta a una BD

[gokufast]

hola estoy buscando una solucion a esto pero o no me sale o no salen como quiero.

el tema es el siguiente, tengo una BD con varias columnas y varios textos mostrar eso en una lista, o en una busqueda sale feo, por lo que quisiera hacer lo siguiente, digamos que tengo las siguientes columnas

Nro Tramite | Fecha | Monto | Glosa | Observaciones

el nro tramite es un varchar, fecha un date monto es float, glosa y observaciones son longtext.

la glosa y observaciones pueden tener hasta mas de 500 caracteres por lo que quiero que salga mas o menos asi:

Nro Tramite | Fecha | Monto | Glosa | Observaciones
1 |2012-01-01 |5.000 | Clic | Clic
2 |2012-02-01 |15.000 | Clic | Clic
3 |2012-02-03 |500 | Clic | Clic

al hacer clic en la primera fila en un popup me salga el texto de la glosa de esa fila y lo extraiga de la BD, lo mismo para las otras filas

vi un popup sencillo pero practico (popup) pero no logro hacer que me jale el dato que quiero.

ojala me puedan dar mas luces para realizarlo.
un saludo

nota: uso php 5, apache 2, mysql 5, todo bajo windows

[gokufast]

bueno menos mal que pude encontrar la respuesta, lo adapte un poco a mis necesidades pero aca pongo la respuesta para el que pueda llegar a necesitarla.

index.php

Código PHP:

 <div class="wrapper"> 
    <h1>Headline</h1> 
    <p>texto.</p> 
    <?php 
    $link = mysql_connect("localhost","root","") or die ("Error: No se ha podido establecer la conexión con el servidor" . mysql_error()); 
    mysql_select_db("xxx_yyy_zzz",$link) or die ("Error: Base de Datos no encontrada" . mysql_error()); 
     
    mysql_query("SET NAMES utf8"); 
     
    $sql_1 = "SELECT * FROM traspasos WHERE da = '34'"; 
    $result_1=mysql_query($sql_1,$link); 
     
    echo "<table style='border: 1px solid #ccc;' cellspacing='0' width='700' border='1'>"; 
        echo "<thead>"; 
                echo "<tr>"; 
                        echo "<th><B>Nro</B></th>"; 
                echo "</tr>"; 
        echo "</thead>"; 
        echo "<tbody>"; 
        while($row_1 = mysql_fetch_array($result_1))  
        {  
            if(isset($row_1['glosa'])) 
            { 
                echo "<tr>"; 
                  echo "<td><a href='#".$row_1['id']."'>".$row_1['nro']."</a></td>"; 
                echo "</tr>"; 
            } 
            else 
            { 
                echo "<tr>"; 
                  echo "<td>".$row_1['nro']."</td>"; 
                echo "</tr>"; 
            } 
        } 
        echo "</tbody>"; 
        echo "</table>"; 
    ?> 
</div> 
<script src="jquery-1.7.2.js"></script> 
<script src="ajax-script.js"></script>  

cuando hacen clic en el enlace sale el popup pero el popup extrae la informacion del archivo content.php
content.php

Código PHP:

  <?php 
     
    if (isset($_POST['id']))  
    { 
        $id = $_POST['id']; 
    } 
     
     
    $link = mysql_connect("localhost","root","") or die ("Error: No se ha podido establecer la conexión con el servidor" . mysql_error()); 
    mysql_select_db("xxx_yyy_zzz",$link) or die ("Error: Base de Datos no encontrada" . mysql_error()); 
     
    mysql_query("SET NAMES utf8"); 
     
    $sql_1 = "SELECT glosa FROM traspasos WHERE id=$id"; 
    $result_1=mysql_query($sql_1,$link); 
     
    $row_1 = mysql_fetch_array($result_1); 
    if(isset($row_1[0])) 
    { 
        echo "<h3>".$row_1[0]."</h3>"; 
        echo "<p>Here is some text</p>"; 
        echo "<p>Id: ".$id."</p>"; 
    } 
    else 
    { 
        echo "<p>Esta Fila no tiene <h3>GLOSA</h3> intente con otra fila </p>"; 
    } 
 
?>   

hay 3 archivos mas que hacen funcionar esto son el jquery-1.7.2.js, ajax-script.js y styles.css

el jquery-1.7.2.js lo pueden descargar de la pagina jquery

ajax-script.js

Código Javascript:

(function() {
 
    var body = $('body');
    var content = $('<div class="content"></div>');
    var cover = $('<div class="cover"></div>');
    var close = $('<a class="close" href="#">x</a>');
    var links = $('a');
    var win = {
        w: $(window).width(),
        h: $(window).height()
    };
 
    links.on('click', function(e) {
        e.preventDefault();
        var hash = this.hash.replace('#','');
        var dataString = 'id=' + hash;
        body.append(cover);
        $.ajax({
            type: 'POST',
            url: 'content.php',
            data: dataString,
            success: function(html) {
                body.append(content);
                content.html('');
                content.append(close);
                content.append(html);
                content.css({
                    'left': (win.w / 2) - (content.width() / 2),
                    'top': (win.h / 2) - (content.height() / 2)
                });
                close.on('click', function(e) {
                    e.preventDefault();
                    cover.remove();
                    content.remove();
                });
            }
        });
 
        cover.on('click', function() {
            cover.remove();
            content.remove();
        });
    });
})();
 

styles.css

Código CSS:

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.wrapper {
    width: 800px;
    margin: 30px auto 0;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    float: left;
    width: 100px;
}
.cover {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 5;
}
.content {
    width: 400px;
    padding: 0 10px;
    background: #fff;
    border: 5px solid #000;
    border-radius: 10px;
    position: fixed;
    z-index: 10;
}
.close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
}
.close:hover {
    text-decoration: underline;
}
 

ojala les sirva.