Закрыть всплывающее окно colorbox с кнопкой и вызвать окно подтверждения?

Question

У меня есть поле подтверждения на моей колонке («вы уверены, что хотите уйти?»). Это срабатывает, когда я закрываю всплывающее окно. Это работает, когда я нажимаю на div «cboxClose» во всплывающем окне.

Я пытаюсь показать это окно подтверждения нажатием кнопки. Но всплывающее окно сразу закрывается, не показывая окно подтверждения.

Мой вопрос: как я запускаю окно подтверждения, когда я нажимаю кнопку отмены. я попробовал несколько способов

// Это просто закрывает всплывающее без отображения окна подтверждения

$('#btnCancel').click(function() { 
       parent.$.colorbox.close(); }); 

// не работает

$('#btnCancel').click(function() { 
        $('#cboxClose').click() 
        }); 

ColorBox

onComplete: function() { 
$("#cboxClose").click(function (e) { 

        // stop any other script from firing 
        e.stopPropagation(); 
        if (confirm('are you sure you want to leave?')) { 
         $.colorbox.close(); 
         // ensure that the binding is removed when closed 
         $("#cboxClose").unbind(); 
        } 

       }); 

      } // close oncomplete 

Answer 1

проблема заключается в том, что colorbox регистрирует обработчик кликов на элементе cboxClose. В результате ни прекращение барботажа, ни предупреждение щелчка (на returning false в обработчике кликов) не будут иметь никакого эффекта, потому что обработчик colorbox уже зарегистрирован. Единственный способ остановить этот обработчик - это отвязать его. Однако для этого вам нужна ссылка на обработчик, который вы не получите без изменения кода colorbox.

В любом случае, это то, что происходит, и почему код, который у вас выше, не работает. Другой вариант для вас - переопределить функцию закрытия колонок (это общедоступный метод colorbox, который вызывается обработчиком кнопки close color colorbox). Все, что вам нужно это:

$.colorbox._close = $.colorbox.close; 
$.colorbox.close = function() { 
    if(confirm("Close?")) { 
     $.colorbox._close(); 
    } 
} 

Обратной стороной (которая не может быть проблемой в вашей ситуации) является то, что это будет влиять на все colorboxes на этой странице.

Answer 2

Я решил эту проблему, сделав этот метод и привязки его к кнопке отмены

var originalClose = $.colorbox.close; 
      $.colorbox.close = function (e) { 
       var response; 
       var formChanged = localStorage.getItem("isFormChanged"); 
       var saveClicked = localStorage.getItem("saveClicked"); 
       if (formChanged == "true" && saveClicked == "false") { 
        response = confirm('Do you want to close this window? All your changes will not be saved'); 
        if (!response) { 
         return 
        } 
       } 
       originalClose(); 
      }; 

<input type="button" value="Cancel" id="btncancel" onclick="parent.$.colorbox.close()"/>