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？

确认div的HTML：

<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 for buttons：

$('#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);
});

我尝试在return false;回调中添加beforeClose，但这不起作用，因为单击“是”按钮时它也不会关闭。

提前致谢。

Answer 1

我通过取消关闭关闭按钮

的所有事件来修复此问题

$(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);
        }
    });
}

});

});

干杯！

Answer 2

内森，我查看了谷歌Chrome DEV。我发现fancybox关闭按钮类是：fancybox-item和fancybox-close。

我建议使用.attr()为该关闭按钮添加ID。

像这样：

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

我刚决定将其命名为close，因为这将是关闭按钮最明显的选择;）

现在你可以这样做：

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

并添加您需要的代码。

度过美好的一天。

Answer 3

只需改变订单即可。单击按钮显示警告，然后将花式框连接到警告上的“是”按钮。

Answer 4

我有类似的情况，这是我的解决方案：

在fancyBox的键/值中，我添加了模态。 Modal将禁用导航和关闭。灯箱完全打开后，我告诉它调用一个函数（ 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;
}

这不是一个优雅的解决方案。但是它对我有用。

如何阻止fancyBox关闭？

4 个答案: