Having an issue with multiple popups not closing properly when clicking another link. The popups keep stacking up even though the close function has been specified in the code.
$(document).ready(function() {//$('a.poplight[href^=#]').click(function(){
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
var popMargTop = ($('#' + popID).height() + 10) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
CSS:
.popup_block{
display:none;
background:#151515;
padding:20px;
float:left;
position:fixed;
top:40%;left:50%;
z-index: 99999;
line-height:20px;
}
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
#fade {
display:none;
position:fixed;
left:30%;
top:0px;
width:70%;
height:100%;
z-index:9999;
background:#000; /* change to #fff for solid white */
opacity:1; /* change to opacity:1; */
}
HTML:
<div id="box1" class="popup_block">
HEY
</div>
<div id="box2" class="popup_block">
YO
</DIV>
<div id="box3" class="popup_block">
hello
</div>
</div></div></div></div></div></div></div></div></div></div>