javascript - 是否可以仅从javascript创建模式弹出窗口

因此，我有一个无法编辑的index.html。我唯一可以使用的是链接到该索引文件的javascript文件。模态应该通过javascript(通过createElement方法)创建。

这是我有问题的地方，因为我无法将该模式附加到文档中，并且我直接从脚本中的函数显示它时遇到了问题。

在 Vanilla js中甚至可以做到吗？我知道jquery有解决方案，但我对 Vanilla 方法感兴趣。

这是一个带有按钮的测试，因此我确定它可以正常工作，然后将其编码为可以在就绪状态下运行:

<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);
        myDialog.showModal();
    }
</script>

这是错误:

最佳答案

使用document.body.appendChild(myDialog)将对话框元素附加到主体

function Popup() {
  var myDialog = document.createElement("dialog");
  document.body.appendChild(myDialog)
  var text = document.createTextNode("This is a dialog window");
  myDialog.appendChild(text);
  myDialog.showModal();
}

<button onclick="Popup()" role='button'>
    Show Alert
</button>