crear un lightbox con jquery

lightbox= function ()
{   
            /*en el body agregamos un div con id popup_bg que nos servirá para colocar una capa bloque toda la pagina y con un background oscuro transparente*/
            $("body").append("<div id='popup_bg'></div>");
           /*le damos unos atributos y aqui uno de los mas importantes es ser posicion absoluto ,obtener el ancho, alto del navegador y zindex que le ponemos un numero alto para sobre ponerlo a todos */
                        $("#popup_bg").css({
                                width : $(window).width() + "px",
                                height : $(window).height() + "px",
                                opacity : "0.4",
                                filter : "alpha(opacity=40)",
                                position : "absolute",
                                background : "#000",
                                left : "0px",
                                top : "0px",
                                zIndex : "100000"
                        });
        /*ahora agremamos un div contenedor del contenido y la capa donde carag todo el contenido y le creamos un boton para cerrar*/              
        $("body").append("<div id='popup'><div class='cerrar'><a href='javascript:void(0)'>< img src='https://cdn1.iconfinder.com/data/icons/officeicons/PNG/24/Close.png' /></a></div><div id='popup_contenido'>luisrodriguez.pe</div></div>");
        /*si presionan cerrar hacemos que se oculte suavemente y al termino borramos los elementos que son del lightbox*/
        $("#popup div.cerrar,#popup_bg").click(function(){
              $("#popup, #popup_bg").fadeOut(1000,function(){
                 $("#popup, #popup_bg").remove(); 
              })
          })
         /*centramos la capa 700 de ancho en el 50% del left pero con un margin left -350 y por que ? seria la mitad del ancho asi obtenemos un centrado perfecto*/
               $("#popup").css({
			width : "700px",
			height : "400px", 
			position : "absolute",
			left : "50%",
			top : "50%",
			zIndex : "100001",
			marginLeft : "-350px",
                        marginTop : "-200px",
                        background:"#000",
                        overflow:"auto", 
                        paddingRight:"20px"
		});  
         /*colocamos el boton cerrar a la derecha*/
                $("#popup div.cerrar").css({
			width : "27px",
			height : "25px", 
			position : "absolute",
			marginLeft: "677px",
                        marginTop: "14px"
		});   
 
         /*la capa donde estara todo el texto o imagen*/        
                $("#popup div#popup_contenido").css({
			width : "675px",
			height : "330px", 
                        marginLeft: "25px",
                        marginTop: "46px",
                        overflow:"auto",
                        color:"#fff"
		}); 
}
 
$(document).ready(function(){
    /*por ejemplo aqui cargamos el lightbox cuando termina de cargar la pagina sin necesidad de un click*/
    lightbox()
     /*al clickear una etiqueta a unos cargara el lightbox con el contenido que agregamos al momento de crear la capa contenido*/      
    $("a.prueba1").click(function(){
         lightbox(); 
         return false
    })
    /*pero el ejemplo de arriba funciona nada bien en un caso practico*/
    /*entonces lo mejoramos y hacemos que al clikear un link obtenemos el href y lo cargamos por ajax y lo mostramos en la capa del contenido*/
    $("a.prueba2").click(function(){
        $.get($(this).attr("href"),function(data){
            lightbox();
            $('#popup div#popup_contenido').html(data); 
        });
         return false
    })
 
 
})

<a class="prueba1" href="pagina1.html">pagina 1</a>
<a class="prueba2" href="pagina1.html">pagina 2</a>