2013-05-16 122 views
1

當用戶點擊縮略圖時,我將fancybox添加到頁面以顯示youtube或vimeo視頻。當彈出窗口打開時,一切看起來都很好,但如果在頁面上滾動而不是停留在固定位置,則彈出式覆蓋頁面和彈出窗口本身會隨頁面一起滾動。儘管iframe實際上停留在固定位置。它也會導致渲染工件顯示爲重複的彈出窗口。FancyBox with iframe misrendering

看起來它實際上是某種渲染錯誤,因爲工件並不存在。爲了解決這個問題,我在javascript中添加了一個滾動監聽器,它在主體的頂部添加並刪除1px的填充。這導致瀏覽器重畫屏幕,我猜測,重新定位疊加/彈出並清理工件。

這似乎不是一個適當的解決方案,所以我正在尋找替代解決方案來防止此問題或至少一個鏈接到某個地方確認它是一個渲染問題。

我在mac上使用了最新版本的chrome中的fancybox2。

+0

我的猜測是有東西在你的CSS創建該行爲......但它只是一個猜測,有一個鏈接? – JFK

+0

我試圖設置選項固定爲false,設置後有助於正確呈現彈出窗口,但出現覆蓋問題。 '$ .fancybox( '試驗',{固定:假});' – BILL

回答

0

我的解決方法

options['fixed'] = false; 
    options['afterShow'] = forceUpdateUI; 
    options['afterClose'] = forceUpdateUI; 

    $.fancybox(
     "hello world",options 
    ); 


} 
function forceUpdateUI(){ 
    $('body').addClass('dummy-class'); 
    setTimeout(function(){ 
     $('body').removeClass('dummy-class'); 
    },500); 
} 

    .dummy-class{ 
    padding-top:1px; 
    }