jQuery Dialog设置transfer关闭效果后无法关闭的问题求助

错误原因 #

你使用的transfer特效是jQuery UI的元素转移特效，它要求必须指定一个目标元素（to参数），特效会将当前元素的视觉效果"转移"到目标元素上。如果没有配置目标元素，特效代码会尝试读取不存在的元素坐标属性，从而抛出Cannot read properties of undefined (reading 'top')错误。

解决办法 #

办法1：更换为无需额外配置的关闭特效

将hide配置中的effect替换为slide、fade这类不需要参数的基础特效，示例：

hide: {
  effect: "slide",
  duration: 1000
}

办法2：正确配置transfer特效的目标元素

如果你坚持使用transfer特效，必须添加to参数指定目标元素的选择器，比如转移到触发按钮：

hide: {
  effect: "transfer",
  duration: 1000,
  to: "#save" // 目标元素的CSS选择器
}

额外优化 #

当前代码每次点击按钮都会重新初始化对话框，可能导致重复绑定问题，建议将初始化代码移到点击事件外部，页面加载完成后只初始化一次：

// 页面加载完成后初始化对话框
$(function() {
  $("#dialog").dialog({
    modal: true,
    autoOpen: false,
    width:"auto",
    height:"auto",
    show: {
      effect: "slide",
      duration: 1000
    },
    hide: {
      effect: "slide", // 或配置好transfer的to参数
      duration: 1000
    }
  });
});

// 点击按钮打开对话框
document.getElementById("save").addEventListener('click',function(){
  $("#dialog").dialog("open");
});

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