如何获取多层显示的HTML5 dialog元素中的最顶层对话框？

当你用showModal()打开多个模态Dialog时，浏览器会自动维护一个模态栈，最顶层的就是栈顶的那个。下面是几种实用的获取方式：

方法1：借助document.activeElement #

模态Dialog显示时会自动获得焦点（如果内部没有可聚焦元素，浏览器会给Dialog本身设焦点），所以当前活跃元素所属的Dialog就是最顶层的：

function getTopModalDialog() {
  const activeEl = document.activeElement;
  // 向上查找最近的已打开Dialog
  const topDialog = activeEl?.closest('dialog[open]');
  // 兜底：如果没有活跃元素，取最后打开的Dialog
  return topDialog || [...document.querySelectorAll('dialog[open]')].pop() || null;
}

方法2：直接取最后打开的Dialog #

每次调用showModal()都会把Dialog加入栈顶，同时添加open属性。所以所有带open属性的Dialog里，最后一个就是最顶层的：

function getTopModalDialog() {
  const openDialogs = document.querySelectorAll('dialog[open]');
  return openDialogs[openDialogs.length - 1] || null;
}

这个方法最简单，只要你是按顺序调用showModal()，结果绝对准确。

方法3：手动维护模态栈（适合复杂场景） #

如果需要实时追踪栈的变化，比如自定义模态管理，可以监听Dialog的show和close事件来维护栈数组：

const modalStack = [];

// 捕获阶段监听show事件，加入栈
document.addEventListener('show', (e) => {
  if (e.target.tagName === 'DIALOG') {
    modalStack.push(e.target);
  }
}, true);

// 捕获阶段监听close事件，移除出栈
document.addEventListener('close', (e) => {
  const idx = modalStack.indexOf(e.target);
  if (idx !== -1) modalStack.splice(idx, 1);
}, true);

// 获取栈顶元素
function getTopModalDialog() {
  return modalStack.at(-1) || null;
}

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