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.