Menu
Hi
I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize.
The original code I found : ( [url]http://kalyanchakravarthy.net/?p=208
Any suggestions or help will be greatly appreciated. THANK YOU
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script language=”javascript” src=”jquery-1.2.6.min.js”></script>
<!–script language=”javascript” src=”jquery-schedule-overlay.js”></script–>
<style type=”text/css”>
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayContent {
padding:0px;
}
.overlayContentb {
padding:0px;
}
.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }
</style></head>
<body>
<div class=”bgCover”> </div>
<a href=”#” class=”launchLink”>Launch Window</a>
<div class=”overlayBox”>
<div class=”overlayContent”>
<a href=”#” class=”closeLink”>Close</a>
<img src=”Session-A-mock-up.jpg” alt=”Session A Schedule ” />
</div></div>
<br /><br />
<a href=”#” class=”launchLinkb”>Launch Window 2</a>
<div class=”overlayBoxb”>
<div class=”overlayContentb”>
<a href=”#” class=”closeLink”>Close</a>
<img src=”Session-B-mock-up.jpg” alt=”Session B Schedule “/>
</div></div>
<script language=”javascript”>
function showOverlayBox() {
//if box is not set to open then don’t do anything
if( window.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$(‘.overlayBox’).css({
display:’block’,
left? $(window).width() – $(‘.overlayBox’).width() )/2,
top? $(window).height() – $(‘.overlayBox’).height() )/2 -20,
position:’absolute’
});
// set the window background for the overlay. i.e the body becomes darker
$(‘.bgCover’).css({
display:’block’,
width: $(window).width(),
height:$(window).height(),
});
function showOverlayBoxb() {
windowb=window.open;
//if box is not set to open then don’t do anything
if( windowb.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$(‘.overlayBoxb’).css({
display:’block’,
left? $(window).width() – $(‘.overlayBoxb’).width() )/2,
top? $(window).height() – $(‘.overlayBoxb’).height() )/2 -20,
position:’absolute’
});
// set the window background for the overlay. i.e the body becomes darker
$(‘.bgCover’).css({
display:’block’,
width: $(window).width(),
height:$(window).height(),
});
}
function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$(‘.bgCover’).css({opacity:0}).animate( {opacity:0.5, backgroundColor:’#000′} );
// dont follow the link : so return false.
return false;
}
function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$(‘.bgCover’).css({opacity:0}).animate( {opacity:0.5, backgroundColor:’#000′} );
// dont follow the link : so return false.
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$(‘.overlayBox,.overlayBoxb’).css( ‘display’, ‘none’ );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$(‘.bgCover’).animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind(‘resize’,showOverlayBox) ;
$(window).bind(‘resize’,showOverlayBoxb) ;
// activate when the link with class launchLink is clicked
$(‘a.launchLink’).click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$(‘a.launchLinkb’).click( doOverlayOpenb );
// close it when closeLink is clicked
$(‘a.closeLink’).click( doOverlayClose );
</script>
</body>
</html>