hello i downloaded fancybox.net and edditted the example file from the download pack. i added a google maps map. and when i click on the iframe link, the iframe popup apears BEHIND the google maps map. thats not the way i want it offcourse. what did i do wrong? i didn't change the original code from the example file. see this image for the error: http://img297.imageshack.us/img297/8981/knipsel.png
A:
It's a Z-index issue. If you set the Z-index for your popup to be something higher, it should show on top.
#element {
z-index: 99;
}
S Pangborn
2010-05-28 15:06:58
nope. i tried before. when i add z-index to #iframe.. i see the same. also set z-index for the googlemaps to -1, no changes.. #iframe{ z-index: 999 !important; }
rihan
2010-05-28 15:10:01
have you examined the z-indexes using firebug?it's likely that fancybox uses the maximum z-index: 9999;
Haroldo
2010-05-28 15:11:27
Can you post a link to your page? I bet the Z-index is still the issue. Google maps is tricky with the Z-index stuff.
S Pangborn
2010-05-28 15:14:33
see my other post
rihan
2010-05-28 19:55:58
A:
i dont have online space right know
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.1 | Demonstration</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="content">
<a id="various3" style="z-index: 999999" href="http://google.ca">Iframe</a>
<div><p> </p></div><iframe width="900" height="800" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.nl/maps?q=google&amp;oe=utf-8&amp;client=firefox-a&amp;ie=UTF8&amp;hl=nl&amp;hq=google&amp;hnear=&amp;t=h&amp;layer=c&amp;cbll=43.432247,-95.58578&amp;panoid=2fPtt4N4mRuitc1wXLm_wg&amp;cbp=13,308.54,,0,14.77&amp;ll=21.371244,-83.320312&amp;spn=39.112201,79.013672&amp;z=4&amp;source=embed&amp;output=svembed"></iframe><br /><small><a href="http://maps.google.nl/maps?q=google&amp;oe=utf-8&amp;client=firefox-a&amp;ie=UTF8&amp;hl=nl&amp;hq=google&amp;hnear=&amp;t=h&amp;layer=c&amp;cbll=43.432247,-95.58578&amp;panoid=2fPtt4N4mRuitc1wXLm_wg&amp;cbp=13,308.54,,0,14.77&amp;ll=21.371244,-83.320312&amp;spn=39.112201,79.013672&amp;z=4&amp;source=embed" style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small>
</body>
</html>
rihan
2010-05-28 15:44:38