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:
Ver original <div id="fondoTableCell">
<div class="cerrar"><p>cerrar (esc)
</p></div>
<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 class="comentario"></div>
<div><img class="abreThick" src="img/8.jpg" alt="" width="50" height="50" /></div>
Código Javascript
:
Ver original$(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:
Ver original#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.