Как я могу остановить закрытие 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, если не нажата кнопка «Да»?

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

Я попытался добавить 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

Натан, я просмотрел Google Chrome DEV. И я обнаружил, что классы кнопок закрытия fancybox: fancybox-item и fancybox-close.

Я предлагаю добавить идентификатор для этой кнопки закрытия, используя .attr().

Как это:

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

Я просто решил назвать это close, потому что это был бы самый очевидный выбор для кнопки закрытия;)

Теперь вы можете просто сделать:

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

И добавьте нужный код.

Хорошего дня.

Answer 3

У меня была похожая ситуация, и это было мое решение:

В ключе / значениях для fancyBox я добавил модал. Модал отключит навигацию и закрытие. После того, как лайтбокс открывается полностью, я говорю ему вызвать функцию ( 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

Простое изменение порядка должно сделать это.Нажмите кнопку, чтобы отобразить предупреждение, затем подключите необычную коробку к кнопке «Да» на предупреждении.