I'm currently facing an issue where different contents are supposed to be displayed in different lightbox links, but instead, when I click on any link, only the last content appears in all other lightboxes. It seems like there is some overlapping happening.
<div class="servicos lightbox">
<a><h3> BOX ONE </h3></a>
</div>
<div class="background"></div>
<div class="box">
<div class="close">
<h4>X</h4>
</div>
<h1> HERE WE SEE 1° CONTENT </h1>
</div>
<div class="servicos lightbox">
<a><h3> BOX TWO </h3></a>
</div>
<div class="background"></div>
<div class="box">
<div class="close">
<h4>X</h4>
</div>
<h1> HERE WE SEE 2° CONTENT </h1>
</div>
$(document).ready(function () {
$('.lightbox').click(function () {
$('.background, .box').animate({
'opacity': '.50'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
.background {
display: none;
position: fixed;
z-index: 102;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background-image:url(../imagens/bg_litghbox.gif);
z-index:105;
overflow: auto;
}
.box {
position:absolute;
width: 70%;
height:auto;
background-color:#FFFFFF;
z-index:106;
padding:14px;
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
box-shadow: 2px 2px 2px #333333;
-moz-box-shadow: 2px 2px 2px #333333;
-webkit-box-shadow: 2px 2px 2px #333333;
display:none;
overflow:auto;
}
.close {
float:right;
cursor:pointer;
}