Question

所以我有一个我无法编辑的index.html。我唯一可以使用的是链接到该索引文件的javascript文件。 Modal应该通过javascript（通过createElement方法）创建。

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

这甚至可以用香草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>

这是错误：

未捕获的DOMException：无法执行＆＃39; showModal＆＃39;上＆＃39; HTMLDialogElement＆＃39;：元素不在文档中。

Answer 1

使用document.body.appendChild(myDialog)

将对话框元素附加到正文

＆＃13;

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();
}

＆＃13;

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

＆＃13;

Answer 2

没有没有“dialog”元素具有该功能。你必须创建一个常规元素将它附加到文档然后用css来定位它。

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

2 个答案: