管理多层HTML5模态对话框：手动追踪顶部元素

// 用于追踪所有已打开对话框的数组
const openDialogs = [];

/**
 * 显示一个对话框并将其添加到追踪列表。
 * @param {HTMLDialogElement} dialog - 要显示的对话框元素。
 */
function show(dialog) {
  dialog.showModal(); // 显示模态对话框
  openDialogs.push(dialog); // 将对话框添加到数组末尾
  logTopDialog(); // 记录当前最顶层对话框
}

/**
 * 关闭一个对话框并将其从追踪列表中移除。
 * @param {HTMLDialogElement} dialog - 要关闭的对话框元素。
 */
function close(dialog) {
  // 查找对话框在数组中的索引
  const i = openDialogs.indexOf(dialog);
  if (i !== -1) {
    openDialogs.splice(i, 1); // 从数组中移除对话框
  }
  logTopDialog(); // 记录当前最顶层对话框
}

/**
 * 打印当前最顶层对话框的ID。
 */
function logTopDialog() {
  // 使用 at(-1) 获取数组最后一个元素（即最顶层对话框）
  console.log(`当前最顶层对话框 ID = ${openDialogs.at(-1)?.id || '无'}`);
}

// 获取页面中的对话框和按钮元素
const dialog1 = document.getElementById('dialog1');
const dialog2 = document.getElementById('dialog2');
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');

// 为按钮绑定打开对话框的事件
btn1.addEventListener('click', () => show(dialog1));
btn2.addEventListener('click', () => show(dialog2)); // 这个按钮在dialog1内部

// 为对话框绑定关闭事件
// 当对话框通过表单提交（method="dialog"）或dialog.close()关闭时会触发此事件
dialog1.addEventListener('close', () => close(dialog1));
dialog2.addEventListener('close', () => close(dialog2));

<!-- 第二个对话框 -->
<dialog id="dialog2">
  <form method="dialog">
    <p>这是第二个对话框！</p>
    <button>关闭</button>
  </form>
</dialog>

<!-- 第一个对话框 -->
<dialog id="dialog1">
  <form method="dialog">
    <p>这是第一个对话框。</p>
    <!-- 在第一个对话框内部添加一个按钮，用于打开第二个对话框 -->
    <button id="btn2" type="button">打开对话框 2</button>
    <button>关闭</button>
  </form>
</dialog>

<!-- 页面上的一个按钮，用于打开第一个对话框 -->
<button id="btn1">打开对话框 1</button>