2012-04-18 48 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); 
         } 
        });