我的彩盒上有一个确认框(“你确定要离开吗?”)。 当我关闭弹出窗口时会触发此操作。当我点击弹出窗口中的“cboxClose”div时,这是有效的。
我试图在按钮点击时显示此确认框。但弹出窗口立即关闭而没有显示确认框。
我的问题是当我点击取消按钮时如何触发确认框。我试过几种方法
//这只是关闭弹出窗口而不显示确认框
$('#btnCancel').click(function () {
parent.$.colorbox.close(); });
//不起作用
$('#btnCancel').click(function () {
$('#cboxClose').click()
});
颜色框
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
答案 0 :(得分:2)
这里的问题是colorbox在cboxClose
元素上注册了一个点击处理程序。因此,既不停止冒泡也不阻止点击(通过单击处理程序中的returning false
)将产生任何效果,因为颜色框处理程序已经注册。阻止该处理程序运行的唯一方法是解除绑定。但是,要做到这一点,您需要一个对处理程序的引用,如果不修改颜色框代码,您将无法获得该引用。
在任何情况下,这就是正在发生的事情,以及为什么上面的代码不起作用。另一个选择是覆盖colorbox close函数(这是colorbox的关闭按钮处理程序调用的公共颜色框方法)。所有你需要的是:
$.colorbox._close = $.colorbox.close;
$.colorbox.close = function() {
if(confirm("Close?")) {
$.colorbox._close();
}
}
缺点(在您的情况下可能不是问题)是这会影响页面上的所有颜色框。
答案 1 :(得分:0)
我通过制作此方法并将其绑定到取消按钮
来解决了这个问题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()"/>