我的颜色框上有一个确认框("你确定要离开吗?")。这会在我关闭弹出窗口时触发。当我点击弹出菜单上的"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
这里的问题是colorbox在cboxClose
元素上注册了一个点击处理程序。因此,无论是停止冒泡还是阻止点击(通过点击处理程序中的returning false
)都不会有任何效果,因为颜色框处理程序已经注册。阻止该处理程序运行的唯一方法是解除绑定。然而,要做到这一点,你需要对该处理程序的引用,如果不修改颜色框代码,就无法获得该引用。
无论如何,这就是发生的事情,也是上面的代码不起作用的原因。另一个选项是覆盖colorbox关闭函数(这是由colorbox的关闭按钮处理程序调用的公共colorbox方法)。你只需要这个:
$.colorbox._close = $.colorbox.close;
$.colorbox.close = function() {
if(confirm("Close?")) {
$.colorbox._close();
}
}
不利的一面(在您的情况下可能不是问题)是,这将影响页面上的所有颜色框。
我通过制作这个方法并将其绑定到取消按钮来解决这个问题
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()"/>