javascript - 在带有颜色框弹出窗口的表单上添加“您确定要离开页面而不保存吗”

Question

我在弹出颜色框上有一个表单，如果用户编辑其中一个文本框然后他们点击取消，我想要一个弹出窗口，显示类似“你确定要离开而不保存吗？”。目前我有弹出窗口显示，但它在弹出颜色框已经关闭后显示

用户表页面

 $('a.openDialog').colorbox({
                iframe: true,
                transition: "elastic",
                width: "75%", height: "90%"
            });

实际表格页面

 $(':input', 'form').bind("change", function () {
                setConfirmUnload(true);
             });


function setConfirmUnload(on) {

              window.onbeforeunload = (on) ? unloadMessage : null;
          }

          function unloadMessage() {
              return 'You have entered new data on this page.' +
        ' If you navigate away from this page without' +
        ' first saving your data, the changes will be' +
        ' lost.';
      }

Answer 1

如果没有帮助，您可以使用颜色框回调 onCleanup 或 onClose 可以在关闭按钮或 div 上添加侦听器

Answer 2

我找到了解决方案，你必须调用 colorbox 的 oncomplete 函数，这是代码

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

                        // stop any other script from firing
                        e.stopPropagation();

                        if (confirm('You have unsaved changes, are you sure that you want to cancel? All of your changes will be lost.')) {
                            $.colorbox.close();
                            // ensure that the binding is removed when closed
                            $("#cboxClose").unbind();
                        }

                    });

                } // close oncomplete