2010-05-28 1 views
2

Я загрузил fancybox.net и отредактировал файл примера из пакета загрузки. Я добавил карту карт google. , и когда я нажимаю ссылку iframe, всплывающее окно iframe появляется на карте карт google. Это не так, как я хочу, чтобы он закончился. что я сделал неправильно? Я не изменил исходный код из файла примера. увидеть это изображение ошибки:fancybox popup появляется за картами Google

enter image description here


я не имею онлайн пространство право знать

<!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> 
+0

это может иметь что-то делать с г-индекс –

+0

я имел такую ​​же проблему и следующее решение помогло мне: http://stackoverflow.com/questions/5281002/z-index-and-iframes – guttermonk

ответ

1

Это проблема Z-индекс. Если вы установили Z-index для своего всплывающего окна как нечто более высокое, оно должно отображаться сверху.

#element { 
    z-index: 99; 
} 
+0

Нету , я пробовал раньше. когда я добавляю z-index в #iframe .. я вижу то же самое. также установить z-index для googlemaps на -1, без изменений .. #iframe {z-index: 999! important; } – rihan

+0

Вы изучили z-индексы с помощью firebug? вполне вероятно, что fancybox использует максимальный z-индекс: 9999; – Haroldo

+0

Можете ли вы разместить ссылку на свою страницу? Уверен, что Z-индекс по-прежнему остается проблемой. Карты Google сложны с материалами Z-index. –

1

Вы должны установить Z-индекс внутри .css файл FancyBox.

 Смежные вопросы

  • Нет связанных вопросов^_^