确认关闭Colorbox

3
如果用户试图关闭colorbox,我希望显示简单的确认弹窗框。我尝试了以下代码:

我希望在colorbox关闭时显示一个简单的确认弹窗框。 我尝试了以下代码:

onCleanup:function(){ confirm('Are you sure'); }

它显示确认框,但是即使我点击“取消”,colorbox也会关闭!有人能帮忙吗?
4个回答

9

在常见问题解答中已经有一个很好的例子了。

您需要重新定义colorbox的关闭方法:

var originalClose = $.colorbox.close;
$.colorbox.close = function(){
  if (confirm('Do you want to close this window?')) {
    originalClose();
  }
};

5

@Ken,你的示例对我非常有效...几乎完美。唯一需要修改的是在设置点击函数之前必须解除绑定,因为出于某种原因,它会忽略我的if语句并在第一次加载时关闭。以下是我用于确认关闭colorbox的代码:

$(".Add").colorbox({
    onComplete:function(e){
       $("#modalForm").ajaxForm(modalOptions);
       $("#cboxClose").unbind(); 
       $("#cboxClose").click(function(e){
          e.stopPropagation();
          if(confirm('Are you sure you want to cancel your changes?')){
             $.colorbox.close();
             $("#cboxClose").unbind();                               
          }                           
       }); 
    }
   });

这很好!是否有一种方法只在Colorbox打开的页面上有所更改时才显示消息? - Dennis
@Dennis,我将使用jQuery在该表单的所有输入上附加一个onChange处理程序。如果调用该函数,请将变量(例如var hasChanged = false; // for default init value)设置为true-$ ("#colorboxFormId:input"). on("change", function(){hasChanged = true;})。然后你的if(confirm...)将变成if(hasChanged && confirm(...)。很抱歉代码中有错别字 - 这是我会追求的方法。 - Tommy
@Dennis - 还要注意,如果您的colorbox内容是通过AJAX加载的,则需要在内容加载后附加此处理程序,或引用屏幕上存在的父元素。否则,处理程序将永远不会附加到表单上,因为它在页面首次加载时不存在。 - Tommy
谢谢提供信息。我们正在使用iframe,这给我们带来了一些麻烦。 - Dennis

5

我曾经用FancyBox做过类似的事情。我认为你最好的选择是在ColorBox显示时将事件处理程序绑定到关闭按钮:

onComplete:function(){
  $("#cboxClose").click(function(e) {
    // stop any other script from firing
    e.stopPropagation(); 
    if (confirm('Are you sure')) {
      $.colorbox.close();
      // ensure that the binding is removed when closed
      $("#cboxClose").unbind();
    }
  });
}

0

我不知道colorbox是否允许在开始关闭后取消它..

如果可以的话,您需要更改您的代码为

onCleanup:function(){ return confirm('Are you sure'); }

1
你可以随时修改ColorBox,添加一个回调函数onBeforeClose,该函数考虑来自回调/回调函数的返回值。 - Jonathan Fingland
@Jonathan,确实。从源代码来看,这很容易做到... - Gabriele Petrioli

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接