Fancybox v2第二次點擊失敗

我有一個網站使用Fancybox v2的ajax選項來顯示某些信息，比如幫助，聯繫信息等等。我注意到它有一個問題，但是，它在哪裏工作第一次點擊就很好，但通常會對隨後的點擊產生不利影響 - 實際彈出窗口可能會短暫出現然後消失，或者根本不會出現，並且疊加層可能會加載兩到三次，因此需要幾次點擊才能清除它。Fancybox v2第二次點擊失敗

不管你是否點擊同樣的鏈接或另一個也使用Fancybox的鏈接。 Firebug控制檯不報告錯誤。如果刷新頁面，您將獲得另一次可靠的點擊，然後再次點擊會再次出現奇怪的行爲。

我已經創建了一個簡化版本的我們的頁面（刪除所有其他腳本），看看是否有東西導致衝突，但似乎並非如此。你可以看看這裏：

http://frontandback.com.au/fancytest/

在網站的右上角的三個環節具有的fancybox適用於他們。例如：

<ul> 
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li> 
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Help</a></li> 
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">FAQs</a></li> 
</ul>

如果有人有什麼建議是什麼導致這個奇怪的問題，將不勝感激。

乾杯。

來源

2012-12-17 Seona

對於您的每三個環節，我認爲這是對HASHTAG一個空白的問題？你可以測試和更改'data-fancybox-href =「index.html #main」'到'data-fancybox-href =「index.html＃main」'。同樣的問題在這裏：'href =「legals.aspx #main」' – arttronics

你試圖從你內部加載相同的頁面正在加載fancybox，因此它進入一個循環嘗試重新加載jQuery和fancybox腳本（檢查你的控制檯） ...嘗試加載一個分離的頁面，而不是....或如果內容是在同一頁面內，請使用類型：'inline'而不是ajax – JFK

感謝您的反饋人。一些進一步的評論： @JFK：這只是爲了這個例子的目的。真正的網站（目前在我們公司的防火牆後面，所以我不能指出人們）將鏈接發送到不同的頁面，併發生相同的錯誤。然而，這可能有好處，因爲鏈接到的頁面上也有腳本。不知道這是什麼方法。 – Seona

從this post我創建了一個修訂版本，您可以通過ajax從文件加載部分內容。

這個新版本採用了（HTML5）data-屬性通過URL的hash所以不是這樣

<li><a href="index.html" data-fancybox-href="index.html #contact" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li>

，我們將做到這一點

<li><a href="index.html" data-segment="#contact" target="_blank" class="fancybox">Contact us</a></li>

... 通知，我們沒有使用任何特殊fancybox 類fancybox.ajax也fancybox.iframe在評論部分建議。

那麼基本腳本

$(".fancybox").on("click", function() { 
    targetContent = $("<div />").load(this.href +" "+ $(this).data("segment")); 
    $.fancybox(targetContent, { 
     fitToView: false, 
     autoSize : false, 
     width: 420, // or whatever 
     height: 280 
    }); // fancybox 
    return false; // prevent default 
}); // on

您可以通過style=""屬性設置尺寸各<div>從遠程文件，然後設置autoSize : true並刪除width和height選項來獲得一個動態的大小。

當然，revised DEMO

來源

2012-12-18 04:17:52 JFK

** + 1 **優秀的答案！ – arttronics

太棒了，謝謝@JFK。可悲的是，我還沒有享受這一點的聲譽。但你搖滾。：d – Seona

Fancybox v2第二次點擊失敗

回答

相關問題