如何阻止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); 
     } 
    }); 
} 

}); 

}); 

干杯的所有事件！