Jquery UI对话框问题-在呈现对话框之前出现关闭按钮或超链接

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog" title="对话框标题">
  对话框内容
</div>

$(document).ready(function() {
  $("#dialog").dialog({
    autoOpen: false, // 初始时不自动打开对话框
    closeText: "关闭", // 设置关闭按钮的文本
    closeOnEscape: true, // 允许通过按下ESC键关闭对话框
    show: {
      effect: "fade", // 设置打开对话框的动画效果
      duration: 500 // 动画持续时间为500毫秒
    },
    hide: {
      effect: "fade", // 设置关闭对话框的动画效果
      duration: 500 // 动画持续时间为500毫秒
    },
    buttons: [
      {
        text: "确定",
        click: function() {
          // 点击确定按钮时执行的操作
        }
      },
      {
        text: "取消",
        click: function() {
          // 点击取消按钮时执行的操作
          $(this).dialog("close"); // 关闭对话框
        }
      }
    ]
  });

  // 点击关闭按钮或超链接时打开对话框
  $("#open-dialog").click(function() {
    $("#dialog").dialog("open");
  });
});

<a href="#" id="open-dialog">打开对话框</a>