2012-04-18 72 views
2

http://www.mayakaimal.com/media-press的fancybox不會在谷歌瀏覽

它工作在我測試的所有其他瀏覽器滾動。

<script type="text/javascript"> 
     $j = jQuery.noConflict(); 
     $j(function(){ 
     $j("a.fancybox").fancybox({ 
      maxWidth : '100%', 
      maxHeight : '100%', 
      fitToView : false,     
      closeClick : false, 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
     }); 
    </script> 
+0

只需檢查錯位的fancybox鉻和關閉檢查器窗口修復該問題。只刷新頁面會導致先前未打開正確對齊的框正確打開。不應該代碼是「var $ j = jQuery.noConflict();」但我不明白這將如何解決這個問題。 – 2012-04-18 17:58:20

+0

看來,Fancybox在Chrome中使用時,在加載後沒有正確調整內容的大小。在Chrome中,看起來盒子的大小是在內容加載之前計算的。所以盒子的對齊關閉了。有幾個選項應該足以作爲解決方法...將內容加載到彈出框或將centerOnScroll設置爲true後調用$ .fancybox.resize可能會解決Chrome中的問題。 – 2012-04-18 18:07:44

+0

在Firefox中重現了這個問題...絕對是事件的順序... fancybox在內容加載到框中之前計算框的大小。 – 2012-04-18 18:18:38

回答

1

如果指定fancybox高度大於一定值時,fancybox不會滾動。不知道爲什麼這樣。

下面的代碼工作在我的情況。玩它看看它是否可以解決你的情況。

height: Math.min(600, $(window).height() - 96) 

    $.fancybox({ 
     width: 800, 
     height: Math.min(600, $(window).height() - 96), 
     autoScale: false, 
     padding: 8, 
     href: url, 
     scrolling: 'auto', 
     hideOnOverlayClick: false, 
     centerOnScroll: true, 
     transitionIn: 'elastic', 
     transitionOut: 'elastic', 
     type: 'iframe' 
    }); 
0

這應該工作:

    $.fancybox({ 
         "href": "putYourURLhere", 
         "width": 500, 
         "height": 500, 
         "autoSize": false, 
         "autoDimensions": false, 
         "scrolling": 'auto', 
         "centerOnScroll": true, 
         "transitionIn": 'elastic', 
         "transitionOut": 'elastic', 
         "type": 'iframe', 
         "onClosed": function() { 
          parent.location.reload(true); 
         } 
        });