jQuery对话框DIV重叠及锚点点击后上方消息字体缩小问题求助

我来帮你梳理下这两个问题的根源和解决办法：

一、锚点上方消息字体变小的问题 #

看你代码里有个明显的错误：$("#dialog-showMsg").text = " "; —— jQuery里设置文本内容应该用.text()方法，直接给text属性赋值是无效的，而且这行代码还会破坏对话框的DOM结构，导致原本绑定在容器上的CSS样式（比如字体大小）失效，后续添加的内容就会继承错误的样式，看起来字体变小了。

另外，你用append添加内容时，把字符串拆成了两个参数，而且<br>还转义成了<br/>，这会导致换行符变成纯文本显示，也可能影响布局和字体表现。

修复后的代码示例： #

function OnError(xhr, errorType, exception) {
  // 清空指定容器的内容，保留DOM结构和样式
  $('#dialog-showMsg #sp').empty();
  // 移除ExDetails元素
  $("#ExDetails").remove();
  
  // 正确设置错误消息，直接用HTML标签实现换行
  $("#dialog-showMsg #sp").html("Error something bad happened<br><br>");
  
  // 初始化或打开对话框
  $("#dialog-showMsg").dialog({
    draggable: true,
    // 你的其他对话框配置，比如modal、width等
  });
}

额外建议： #

可以给#dialog-showMsg #sp明确设置字体大小的CSS，避免样式继承问题：

#dialog-showMsg #sp {
  font-size: 16px; /* 根据你的需求调整 */
  line-height: 1.5;
}

二、对话框DIV重叠的问题 #

这个问题通常是因为每次调用.dialog()时，没有销毁之前已经创建的对话框实例，jQuery UI会在原有元素上叠加生成新的对话框容器，导致多个对话框重叠。

解决思路有两种： #

1. 复用对话框实例（推荐）
   提前在页面初始化时创建对话框，设置autoOpen: false，需要显示时直接调用open方法：

// 页面加载完成后初始化对话框
$(document).ready(function() {
  $("#dialog-showMsg").dialog({
    draggable: true,
    autoOpen: false,
    // 其他配置项
  });
});

function OnError(xhr, errorType, exception) {
  $('#dialog-showMsg #sp').empty();
  $("#ExDetails").remove();
  $("#dialog-showMsg #sp").html("Error something bad happened<br><br>");
  
  // 打开已初始化的对话框
  $("#dialog-showMsg").dialog("open");
}

2. 每次创建前销毁旧实例
   如果必须每次都重新初始化对话框，就在创建前先销毁已存在的实例：

function OnError(xhr, errorType, exception) {
  // 检查是否存在对话框实例，存在则销毁
  if ($("#dialog-showMsg").data("ui-dialog")) {
    $("#dialog-showMsg").dialog("destroy");
  }
  
  $('#dialog-showMsg #sp').empty();
  $("#ExDetails").remove();
  $("#dialog-showMsg #sp").html("Error something bad happened<br><br>");
  
  $("#dialog-showMsg").dialog({
    draggable: true,
    // 其他配置项
  });
}

这样就能避免多次创建对话框导致的重叠问题了。

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