jquery fancybox - 防止在fancybox之外點擊關閉

Question

我爲我的模態窗口使用Fancybox插件。無論我使用什麼選項，似乎都無法阻止fancybox模式窗口在用戶單擊fancybox模式窗口（灰色區域）之外時關閉。

有沒有辦法強制用戶點擊X或我觸發關閉事件的按鈕？這看起來應該很簡單，所以我希望我只是讀了錯誤的例子。我試過hideOnContentClick: false但這似乎不適合我。有任何想法嗎？

Answer 1

沒有選擇。你將不得不改變源代碼。

在jquery.fancybox-1.2.1.js你需要註釋掉（或刪除）線341在_finish方法：

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close); 

Answer 2

以下行添加到您的功能，你不必在jquery.fancybox-1.2.6.js的

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");}, 

Answer 3

我使用的fancybox 1.3.1，如果你想強制用戶只需通過點擊按鈕，關閉模式對話框改變什麼，你可以在指定配置：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#your_link").fancybox({ 
     'hideOnOverlayClick':false, 
     'hideOnContentClick':false 
    }); 
    }); 
</script> 

Answer 4

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#your_link").fancybox({ 
     'hideOnOverlayClick':false, 
     'hideOnContentClick':false 
    }); 
    }); 
</script>        

Answer 5

我遇到了同樣的「問題」。這爲我工作：

$("#fancybox-overlay").unbind(); 

Answer 6

jQuery(".lightbox").fancybox({ 
     helpers  : { 
      overlay : { 
       speedIn : 0, 
       speedOut : 300, 
       opacity : 0.8, 
       css  : { 
        cursor : 'default' 
       }, 
       closeClick: false 
      } 
     }, 
    }); 

Answer 7

以上都不是爲我工作，所以我就寫了的fancybox的最新版本的簡單一點。

function load(parameters) { 
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>'); 
} 

$(document).ready(function() { 
    $(".various").fancybox({ 
     modal: true, 
     afterLoad: load 
    }); 
}); 

希望這有助於:)

Answer 8

由@Gabriel這個問題給出的解決方案$("#fancybox-overlay").unbind()除了工作，我需要加載的內容後，將其綁定到的fancybox，我不能馬上解除綁定。對於誰運行到這個問題的人，下面的代碼解決了這個問題對我來說：

$('.fancybox').fancybox({'afterLoad' : function() { 
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);} 
}); 

的400ms的延遲得到它爲我工作。它與300ms一起工作，但我不想冒險。

Answer 9

如果你正在使用Fancybox 1.2.6（就像我在一個項目上），我發現了選項hideOnOverlayClick。您可以將其設置爲false（例如hideOnOverlayClick：false）。

我發現這個選項時，根據Scott Dowding提供的建議修改代碼。

Answer 10

我不得不使用上述所有答案的組合，因爲它們都包含錯誤。當然，不需要編輯源代碼。

在我的情況下，我想關閉覆蓋點擊關閉框，因爲我有一系列問題可以在fancybox內順序顯示，所以我不希望用戶因意外地點擊疊加層而失去進度，但希望在頁面的其他地方保持該功能。

使用該禁用它：

$(".fancybox-overlay").unbind(); 

使用此功能重新啓用它：

$(".fancybox-overlay").bind("click", $.fancybox.close); 

Answer 11

只需使用下面的代碼：

$(document).ready(function() { 
    $("a#Mypopup").fancybox({ 
     "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox 
     "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox 
     "enableEscapeButton" : false // prevents closing pressing ESCAPE key 
    }); 
    $("a#Mypopup").trigger('click'); 
}); 

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a> 

Answer 12

設置closeClick參數虛假裏面你的功能：

$(".video").click(function() { 
    $.fancybox({ 
     width: 640, 
     height: 385, 
     helpers: { 
      overlay: { 
       closeClick: false 
      } 
     } 
    }); 

    return false; 
}); 

Answer 13

可以防止花式盒應用這些設置

'showCloseButton'=>false, // hide close button from fancybox 
'hideOnOverlayClick'=>false, // outside of fancybox click disabled 
'enableEscapeButton'=>false, // disable close on escape key press 

收得到的fancybox從以下鏈接

http://www.fancybox.net/api

Answer 14

對於這一問題的設置，請嘗試這種方式

$("YourElement").fancybox({ 
helpers: { 
     overlay: { closeClick: false } //Disable click outside event 
    } 

希望這有助於。

Answer 15

您可以將默認的關閉點擊重疊設置爲false。在2.1.5版本中爲我工作。

$.fancybox.helpers.overlay.defaults.closeClick=false;