如何在关闭Kendo模态窗口前弹出操作确认提示？

直接给两个可落地的实现路径，优先选第一种，对原生逻辑侵入性最低：

方案1：基于原生close事件正确拦截，无需修改默认关闭按钮 #

不要在preventDefault之后反复解绑/重绑事件，利用Kendo close()方法支持传入自定义事件参数的特性，加个确认标记就能避免循环拦截，不会出现关不掉窗口的问题。
示例代码：

// 表单脏值检测逻辑，根据你的业务实现，返回true代表有未保存更改
function hasUnsavedChanges() {
  return $("#yourForm").data("kendoForm")?.dirty ?? false;
}

const myWindow = $("#formWindow").kendoWindow({
  title: "表单编辑",
  modal: true,
  width: 600,
  close: function(e) {
    // 存在未保存更改 且 不是用户确认后的关闭触发，就拦截
    if (hasUnsavedChanges() && !e.userConfirmed) {
      e.preventDefault();
      // 弹确认框
      kendo.confirm("当前存在未保存的更改，确定要关闭吗？关闭后未保存内容将丢失。")
        .done(() => {
          // 用户确认关闭，传入自定义标记，避免再次拦截
          myWindow.close({ userConfirmed: true });
        });
    }
  }
}).data("kendoWindow");

这个方案完全复用Kendo原生的所有关闭逻辑：点右上角X、按ESC键、调用代码手动关窗口都会被统一拦截，不需要额外给每个关闭入口加判断。

方案2：自定义关闭按钮（适配老版本Kendo场景） #

如果你的项目用的Kendo版本太老，不支持给close()传自定义参数，再考虑替换原生关闭按钮，定位错位问题本质是按钮挂载的容器错了：

• 不要把按钮append到body或者窗口根容器，直接插到窗口自带的标题栏（类名.k-window-titlebar）内部，基于标题栏做绝对定位，不管窗口怎么拖动、缩放、调整z-index，按钮都会固定在右上角，不会错位。
  示例代码：

/* 隐藏原生关闭按钮 */
.k-window .k-window-titlebar .k-window-actions {
  display: none;
}
/* 自定义按钮样式，直接复用Kendo内置按钮类，减少额外样式编写 */
.custom-close {
  position: absolute;
  top: 6px;
  right: 6px;
}

// 初始化完窗口后插入自定义按钮
const winWrapper = myWindow.wrapper;
winWrapper.find(".k-window-titlebar")
  .css("position", "relative")
  .append(`<button class="k-button k-flat k-button-icon custom-close" title="关闭">
    <span class="k-icon k-i-close"></span>
  </button>`);

// 绑定按钮点击逻辑
winWrapper.on("click", ".custom-close", () => {
  if (!hasUnsavedChanges()) {
    myWindow.close();
    return;
  }
  kendo.confirm("当前存在未保存的更改，确定要关闭吗？关闭后未保存内容将丢失。")
    .done(() => myWindow.close());
});

踩坑提醒：如果用自定义按钮方案，记得把窗口的actions配置里的默认Close按钮去掉，同时给窗口加键盘事件监听，拦截ESC键的关闭逻辑，不然用户按ESC还是会直接关掉窗口，绕过你的提示。

内容的提问来源于stack exchange，提问作者Novice