// 1. 引入必要的jQuery和jQuery UI库
// <link rel="stylesheet" href="//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>

// 2. HTML结构
<div id="existing-content" style="display:none;">
  <p>这是要显示在对话框中的现有内容</p>
</div>

<button id="open-dialog">打开对话框</button>

// 3. JavaScript代码
$(function() {
  // 初始化对话框
  $("#existing-content").dialog({
    autoOpen: false,
    modal: true,
    title: "现有内容对话框",
    width: 500,
    height: 300
  });
  
  // 点击按钮打开对话框
  $("#open-dialog").click(function() {
    $("#existing-content").dialog("open");
  });
});

$("#dynamic-dialog").dialog({
  autoOpen: false,
  modal: true,
  open: function() {
    $(this).load("content.html");
  }
});

$("#dialog-with-buttons").dialog({
  buttons: {
    "确定": function() {
      // 确定按钮逻辑
      $(this).dialog("close");
    },
    "取消": function() {
      $(this).dialog("close");
    }
  }
});

.ui-dialog {
  z-index: 1000 !important;
}

$("#dialog").dialog({
  close: function() {
    $(this).dialog("destroy").remove();
  }
});

$("#dialog").dialog({
  position: { my: "center", at: "center", of: window }
});