谷歌地图后面出现fancybox弹出窗口答案

【问题标题】：fancybox popup appears behind google maps谷歌地图后面出现fancybox弹出窗口
【发布时间】：2011-02-25 04:22:24
【问题描述】：

我下载了 fancybox.net 并编辑了下载包中的示例文件。我添加了谷歌地图地图。当我点击 iframe 链接时，iframe 弹出窗口会出现在谷歌地图的后面。那不是我想要的方式。我做错了什么？我没有更改示例文件中的原始代码。查看此图片以了解错误：

我没有在线空间知道吗

<!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>&nbsp;</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>

【问题讨论】：

可能与z-index有关
我遇到了同样的问题，以下解决方案帮助了我：stackoverflow.com/questions/5281002/z-index-and-iframes

标签： jquery fancybox

【解决方案1】：

这是一个 Z 索引问题。如果您将弹出窗口的 Z-index 设置得更高，它应该显示在顶部。

#element {
    z-index: 99;
}

【讨论】：

不。我以前试过。当我将 z-index 添加到#iframe 时.. 我看到了同样的结果。还将 googlemaps 的 z-index 设置为 -1，没有变化.. #iframe{ z-index: 999 !important; }
您是否使用 firebug 检查过 z-indexes？很可能fancybox使用最大z-index：9999；
你能发布一个链接到你的页面吗？我敢打赌 Z-index 仍然是问题所在。谷歌地图对 Z-index 的东西很棘手。

【解决方案2】：

您必须在fancybox .css 文件内部设置z-index。

【讨论】：