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

[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.