仅用原生JavaScript创建模态弹窗可行吗？DOM异常问题求助

当然可行！你遇到的报错Uncaught DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.原因很直接——你创建的<dialog>元素还没有被添加到当前文档的DOM树中，showModal()方法要求元素必须属于文档的一部分才能正常触发。

问题出在哪？ #

你的测试代码里，只完成了<dialog>元素的创建和文本节点的添加，但缺少了将模态框挂载到文档的关键步骤。浏览器无法找到不在DOM里的元素，自然会抛出错误。

修正后的基础代码 #

把创建好的<dialog>添加到document.body（或者其他DOM容器）中，再调用showModal()就可以正常工作了：

<button onclick="Popup()" role='button'> Show Alert </button>
<script type="text/javascript">
function Popup() {
  var myDialog = document.createElement("dialog");
  var text = document.createTextNode("This is a dialog window");
  myDialog.appendChild(text);
  
  // 必须先把模态框添加到文档中
  document.body.appendChild(myDialog);
  
  myDialog.showModal();
}
</script>

进阶优化：添加关闭功能与清理DOM #

为了提升用户体验，你可以给模态框加上关闭按钮，并且在关闭后把元素从DOM中移除，避免堆积冗余节点：

<button onclick="Popup()" role='button'> Show Alert </button>
<script type="text/javascript">
function Popup() {
  var myDialog = document.createElement("dialog");
  
  // 创建文本内容
  var text = document.createTextNode("This is a dialog window");
  myDialog.appendChild(text);
  
  // 创建关闭按钮
  var closeBtn = document.createElement("button");
  closeBtn.textContent = "关闭弹窗";
  closeBtn.style.marginLeft = "10px";
  closeBtn.addEventListener("click", () => {
    myDialog.close();
  });
  
  // 添加换行和按钮到模态框
  myDialog.appendChild(document.createElement("br"));
  myDialog.appendChild(closeBtn);
  
  // 挂载到文档
  document.body.appendChild(myDialog);
  
  // 关闭后移除模态框，清理DOM
  myDialog.addEventListener("close", () => {
    myDialog.remove();
  });
  
  myDialog.showModal();
}
</script>

这样既实现了原生JS的模态弹窗，又解决了你的报错问题，完全不需要依赖jQuery。

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