如何阻止fancyBox關閉？

Question

我使用fancyBox (version 2)，在fancyBox中是一個聯繫表。我正在添加自己的「你確定要關閉嗎？」方框而不是基本的confirm()所以如果用戶意外點擊關閉，表單內容不會丟失。以下是我在做什麼：

$('.fancybox').fancybox({ 
openEffect: 'fade', 
closeEffect: 'fade', 
openSpeed: 'fast', 
closeSpeed: 'fast', 
beforeClose: function() { $('#confirm_contact_close').fadeIn(300); } 
}); 

但它顯示div時正確關閉。除非單擊「是」按鈕，否則我怎樣才能取消fancyBox的關閉？

HTML確認的div：

<div id="confirm_contact_close"> 
<h2 class="secondary_heading" style="font-size: 27px;">Do you really want to continue?</h1> 
<p>If you continue, the entire form will be cleared.</p> 
<br /> 
<button id="continue_contact_close">Yes</button> 
<button id="cancel_contact_close">No</button> 
</div> 

的jQuery的按鈕：

$('#confirm_contact_close').fadeIn(300); 
$('#continue_contact_close').live('click', function() { 
$.fancybox.close(true); 
}); 
$('#cancel_contact_close').live('click',function() { 
$('#confirm_contact_close').fadeOut(300); 
}); 

我試圖在beforeClose回調添加return false;但是，這並不工作，因爲當 「是」 按鈕點擊它也不會關閉。

在此先感謝。

Answer 1

彌敦道，我瀏覽過Google Chrome DEV。我發現fancybox關閉按鈕類是：fancybox-item和fancybox-close。

我建議的做法是使用.attr()爲該關閉按鈕添加一個ID。

像這樣：

$('.fancybox-item fancybox-close').attr('id','close'); 

我決定將它命名close，因爲這將是關閉按鈕最明顯的選擇;）

現在，你可以這樣做：

$('#close').click(function(){ 
//Put Code 
}); 

並添加您需要的代碼。

祝您有美好的一天。

Answer 2

簡單地改變順序應該這樣做。點擊按鈕顯示警告，然後將花式框連接到警告上的「是」按鈕。

Answer 3

我也有類似的情況，這是我的解決方案：

在對的fancybox的鍵/值，我加模式。模態將禁用導航和關閉。在lightbox完全打開後，我告訴它調用一個函數（enableFancyboxConfirmClose）。該函數添加了所有必需的div和按鈕。我基本上添加了一個自定義關閉按鈕，它允許我調用我自己的函數。

$(".fancybox").fancybox({ 
    maxWidth : 829, 
    maxHeight : 600, 
    fitToView : false, 
    width  : '70%', 
    height  : '70%', 
    autoSize : false, 
    closeClick : true, 
    openEffect : 'fade', 
    closeEffect : 'fade', 
    modal  : true, 
    afterShow : function() { enableFancyboxConfirmClose() } 
}); 

jQuery代碼的按鈕

function enableFancyboxConfirmClose() { 
    $(".fancybox-wrap").append('<div title="Close" class="fancybox-close fancybox-custom-close-btn"></div><div class="fancybox-confirm fancybox-opened"><span style="padding:20px;">Closing this window will clear your entire form, are you sure you want to leave?</span><button class="fancybox-custom-close-confirm">Yes</button> <button class="fancybox-custom-close-cancel">No</button></div>'); 

    $('.fancybox-custom-close-btn').click(function() { 
     $(this).fadeOut();  
     $('.fancybox-confirm').fadeIn(); 
    }); 

    $('.fancybox-custom-close-confirm').click(function() { 
     $(".fancybox-confirm").fadeOut(); 
     $.fancybox.close(); 
    }); 

    $('.fancybox-custom-close-cancel').click(function() { 
     $(".fancybox-confirm").fadeOut();   
     $(".fancybox-close").fadeIn(); 
    }); 
} 

CSS

.fancybox-confirm { 
    position: relative; 
    margin-top: 10px; 
    width: 100%; 
    height: 18px; 
    background-color: #FC0; 
    font-size:14px; 
    padding: 10px 0; 
    color: #444; 
    text-shadow: none; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    display:none; 
} 

.fancybox-custom-close-confirm, .fancybox-custom-close-cancel { 
    height: 20px; 
    float:right; 
    font-size:13px; 
    margin-right: 10px; 
    padding: 0 5px; 
    cursor:pointer; 
} 

這不正是一個完美的解決方案。但它爲我工作。

Answer 4

我解決了這個問題通過解除綁定的關閉按鈕

$(document).ready(function() { 
$('.fancybox').fancybox({ 
autoSize : false, 
scrolling : 'auto', 
beforeLoad : function() {      
    this.width = $(window).width()*0.95; 
    this.height = $(window).height()*0.95; 
}, 

'afterShow': function() { 
    //override fancybox_close btn 
    $('.fancybox-item.fancybox-close').attr('title','Sluiten'); 
    $('.fancybox-item.fancybox-close').unbind(); 
    $('.fancybox-item.fancybox-close').click(function() { 
     var dirt_res = dirty_check('HOK'); 
     if(is_string(dirt_res)) { 
      var dirt_ask = confirm(dirt_res); 
       if(is_string(dirt_ask)) { 
       } else { 
        parent.location.reload(true); 
       } 
     } else { 
      parent.location.reload(true); 
     } 
    }); 
} 

}); 

}); 

乾杯的所有事件！