如何阻止 fancyBox 关闭？

Question

我正在使用FancyBox (版本2)，在FancyBox中包含一个联系表单。我正在添加自己的“您确定要关闭吗？”窗口而不是基本的confirm()，以便如果用户意外点击关闭，表单内容不会丢失。这是我所做的：

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

但是它在显示 div 后立即关闭。如何取消 fancyBox 的关闭，除非单击"Yes"按钮？

确认 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：

$('#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;，但这并不起作用，因为当单击 "是" 按钮时，它也不会关闭。感谢您的理解。

- Nathan

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

});

});

干杯！

- bski

---

与我对@Shawn31313所做的评论相同：当按“esc”关闭fancybox时，这不起作用。 - user1728278

我正在尝试运行这段代码，但是当我点击关闭按钮时没有任何反应。 - libertaire

Answer 2

纳森，我查看了Google Chrome DEV。我发现fancybox关闭按钮的类是：fancybox-item和fancybox-close。

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

像这样：

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

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

现在你可以直接执行以下操作：

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

添加您所需的代码。

祝您拥有美好的一天。

- Shawn31313

---

虽然这不是完整的代码，但它仍然给了我一个现在该做什么的想法。现在当关闭按钮被点击时，我可以只返回false并淡入确认div。谢谢。 - Nathan

尽管 fancybox 也可以通过按下 esc 键来关闭，但这种方法并没有考虑到这一点。 - user1728278

Answer 3

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

- jeffknupp

---

当您单击fancyBox或背景上的“X”时，它会关闭。因此，这种方法行不通，还有其他想法吗？ - Nathan

如果警告尚未被接受，您应该在beforeClose()回调中返回false。这将防止弹出框关闭。 - jeffknupp

Answer 4

我曾经遇到过类似的情况，这是我的解决方案：

在fancyBox的键/值对中，我添加了modal。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;
}

这不是一个十分优雅的解决方案，但对我来说已经足够了。

- Mark Notton