1

我在此页面上使用 FancyBox 2：http ://encoreazalea.com/ee/botanical-gardens在弹出窗口中显示 Google 地图。

窗口很好，但所有地图都有滚动条。我已尝试调整显示窗口的大小，但它似乎无法正确响应我发送的说明。

这是HTML：

<h3 class="state">Washington D.C.</h3>

<div class="gardens">

<p class="garden">US National Arboretum<br />
<a href="http://www.usna.usda.gov/">Website</a> | <a class="map" href="#directions5148">Directions</a></p>
</div>

<div class="gardens">
<div id="directions5148" style="display:none">
<iframe width="600" height="440" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&amp;q=US+National+Arboretum&amp;fb=1&amp;gl=us&amp;hq=US+National+Arboretum&amp;hnear=US+National+Arboretum&amp;cid=0,0,12451978746893569755&amp;t=h&amp;ll=38.912424,-76.96852&amp;spn=0.008014,0.013733&amp;z=16&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?ie=UTF8&amp;q=US+National+Arboretum&amp;fb=1&amp;gl=us&amp;hq=US+National+Arboretum&amp;hnear=US+National+Arboretum&amp;cid=0,0,12451978746893569755&amp;t=h&amp;ll=38.912424,-76.96852&amp;spn=0.008014,0.013733&amp;z=16&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>

</p>
</div>

这是jQuery：

<script type="text/javascript">
    $(".map").fancybox({
            wrapCSS    : 'fancybox-custom',
            width : 700,
            height : 600,
            closeClick : true,
            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee'
                    }
                }
            }
        });
</script>

无论我在窗口中设置什么宽度和高度，总是以相同的大小显示，并且地图周围有滚动条。

我的目标是摆脱滚动条。

谢谢。

4

3 回答 3

1

您可能还需要设置选项autoSize : falseAND fitToView : falseANDscrolling: "no"以获得所需的大小。

于 2012-09-06T22:58:19.823 回答
1

我会尝试直接向 div 添加维度：

<div id="directions5148" class="map_window" style="display:none">

CSS：

.map_window{
   width: 700px;
   height: 600px;
   overflow: hidden;
}
于 2012-09-06T18:11:54.950 回答
-1

这很愚蠢，但 fancybox 没有正确响应，因为我没有包括这个：

$(document).ready(function() {...

在我添加后，其余代码变得更具响应性。

于 2012-09-08T11:38:49.397 回答