jQuery $.ajax y PHP con un CSV

[jesusjj]

Buenas, realmente no estoy utilizando ningún plugin, estoy utilizando uno que vi que era una capa oculta y luego con jQuery y CSS la mostraba y hacía el efecto.

Otras veces que intenté utilizar plugins, me dio problemas el tema de CSS y carga de funciones PHP, así que 'para asegurar' utilicé este.

El código es:

Código Javascript:

// Ventana Modal    
    
    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size
    
        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value
        
        // Modifico script para asignar dinámicamente el id al div
        $(".popup-block").attr('id', popID);
        
        // Envío por ajax el atributo id para indicar el contenido a cargar
        $.post('index.php', {pag:'products', clave: popID},
            function(data) {
                //Fade in the Popup and add close button
                $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="content/images/theme/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
                    
                //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
                var popMargTop = ($('#' + popID).height() + 80) / 2;
                var popMargLeft = ($('#' + popID).width() + 80) / 2;
            
                //Apply Margin to Popup
                $('#' + popID).css({
                    'margin-top' : -popMargTop,
                    'margin-left' : -popMargLeft
                });
            
                //Fade in Background
                $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
                //$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
                
                // modifico el filtro alpha por el fade del diaplay
                $('#fade').css({'display' : 'block'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
                
                //Generamos el listado de productos
                $('#' + popID).html(data);             
        });
                                   
        return false;
    });
 
    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup-block').fadeOut(function() {
            $('#fade, a.close').remove();  //fade them both out
        });
        return false;
    });
 

Código CSS:

/* **************** jQuery ModalWindow ********************************************************* */
 
#fade { /*--Transparent background layer--*/
    display: none; /*--hidden by default--*/
    /*background: #000;*/
    background: url('../../images/theme/modalBackground.png') repeat;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    /*opacity: .80;*/
    z-index: 9999;
}
 
.popup-block{
    display: none; /*--hidden by default--*/
    background: #fff;
    padding: 20px;
    border: 20px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    /*--CSS3 Box Shadows--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--CSS3 Rounded Corners--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
 
img.btn_close { float: right; margin: -55px -55px 0 0; }
 
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade { position: absolute; }
*html .popup_block { position: absolute; }
 
/* **************** jQuery ModalWindow ********************************************************* */
 

Gracias