[jQuery] Seleccionar capa padre para cerrar ventana modal

[uikekarallo]

Hola, tengo una ventana modal hecha con CSS y me gustaría que se cerrase al hacer click en el fondo. Como la capa está anidada dentro del fondo, no me funciona.

Para explicarme mejor, el código:

Código HTML:

<div id="fondoTable">
        <div id="fondoTableCell">
            <div class="thick">
 
                <div class="cerrar"><p>cerrar (esc)</p></div>
 
                <div class="thickImg"></div>
 
                <div class="sep"></div>
 
                <div class="galeria">
                
                    <img src="img/1.gif" alt="foto 1" />
                    <img src="img/2.jpg" alt="foto 2" />
                    <img src="img/3.jpg" alt="foto 3" />
                    <img src="img/4.jpg" alt="foto 4" />
                    <img src="img/8.jpg" alt="foto 5" />
                    <img src="img/6.jpg" alt="foto 5" />
                    <img src="img/5.jpg" alt="foto 5" />
                    <img src="img/7.jpg" alt="foto 5" />
 
                </div>
 
                <div class="comentario"></div>
                
                <div class="clear"></div>
            </div>
        </div>
    </div>
 
    <div><img class="abreThick" src="img/8.jpg" alt="" width="50" height="50" /></div>
 

Código Javascript:

$(document).ready(function () {
 
    $('.abreThick').click(function () {
 
        img = new Image();
        img.src = $(this).attr('src');
        img.alt = $(this).attr('alt');
 
        if (img.width > 1024) { width = 800; } else { width = img.width; }
        if (img.height > 768) { height = 600; } else { height = img.height; }
 
        $('<img alt="' + img.alt + '" src="' + img.src + '" width="' + width + '" height="' + height + '" />').appendTo('.thickImg');
 
        $('#fondoTableCell .thick .comentario').text(img.alt);
 
        delete img;
 
        $('#fondoTableCell .thick .galeria img').click(function () {
 
            img = new Image();
            img.src = $(this).attr('src');
            img.alt = $(this).attr('alt');
 
            if (img.width > 1024) { width = 800; } else { width = img.width; }
            if (img.height > 768) { height = 600; } else { height = img.height; }
 
            $('.thickImg img').remove();
 
            $('<img alt="' + img.alt + '" src="' + img.src + '" width="' + width + '" height="' + height + '" />').fadeIn(500).appendTo('.thickImg');
 
            $('#fondoTableCell .thick .comentario').empty().append('<p>' + img.alt + '</p>');
 
            delete img;
 
        });
 
        $('#fondoTableCell .thick .cerrar').click(function () {
 
            $('#fondoTable').fadeOut(500, function () { $(this).css('display', 'none'); $('.thickImg img').remove(); });
 
        });
 
        $(document).keyup(function (e) {
 
            if (e.keyCode == 27) { $('#fondoTable').fadeOut(500, function () { $(this).css('dispaly', 'none'); $('.thickImg img').remove(); }); }
 
        });
 
 
        /* aquí es donde no encuentro la manera
 
            $('.thick:not(:parent)').click(function () {
 
            $('#fondoTable').fadeOut(500, function () { $(this).css('dispaly', 'none'); $('.thickImg img').remove(); });
 
        });
*/
 
        $('#fondoTable').fadeIn(500).css('display', 'table'); // muestra la capa
 
    });
 
});
 

Código CSS:

#fondoTableCell
    {
        position: relative;
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }
    
        #fondoTableCell .thick      /* capa principal */
        {
            position: relative;
            width: 800px;
            margin: 0 auto;
            padding: 62px;
            border-radius: 15px;
            background-color: white;
        }
        
            #fondoTableCell .thick .cerrar      /* botón cerrar */
            {
                cursor: pointer;
                position: absolute;
                display: block;
                top: -10px;
                right: 62px;
                width: 142px;
                height: 44px;
                border-radius: 2px 2px 15px 15px;
                background-color: #666666;
            }
            
                #fondoTableCell .thick .cerrar p    /* texto botón cerrar */
                {
                    font-size: 16px;
                    color: White;
                    text-align: center;
                    line-height: 44px;
                }
                
            #fondoTableCell .thick .thickImg    /* capa de la imagen principal */
            {
                margin: 0;
                padding: 0;
            }
            
            #fondoTableCell .thick .sep     /* separador */
            {
                height: 1px;
                margin: 10px 0;
                background-color: #CCC;
            }
            
            #fondoTableCell .thick .galeria     /* capa de la galería */
            {
                width: 60%;
                float: left;
                text-align: left;
            }
            
                #fondoTableCell .thick .galeria img     /* imágenes de la galería */
                {
                    cursor: pointer;
                    width: 60px;
                    height: 50px;
                    margin-right: 8px;
                }
            
            #fondoTableCell .thick .comentario      /* capa del comentario o pie de foto */
            {
                width: 40%;
                height: 50px;
                float: right;
            }
            
                #fondoTableCell .thick .comentario p        /* texto comentario o pie de foto */
                {
                    line-height: 50px;
                    font-size: 11px;
                    text-align: right;
                }
 

Lo ideal sería solucionarlo sin modificar las capas, ya que está así para lograr un centrado perfecto sin utilizar javascript.

Gracias de antemano.