javascript - 如何关闭 Html5 对话框

Question

起初，我在我的 html 中得到一个对话框

<dialog open>
  <button id="close">Close</button>
</dialog>

然后，我需要一个 JS 函数来关闭或隐藏它。

怎么做 ？

我也有一个提交按钮来显示对话框。如何展示它？

<input type="Submit" value="Submit" id="show" />

Answer 1

尝试这个，

<dialog id="dialog">
  <p>Hi, I'm a dialog!</p>
  <button id="close">Okay</button>
</dialog>

<button id="show">Show Dialog</button>

JS脚本

var dialog = document.getElementById('dialog');
var showBtn = document.getElementById('show');
var closeBtn = document.getElementById('close');

// Setup an event listener for the show button.
showBtn.addEventListener('click', function(e) {
  e.preventDefault();

  // Show the dialog.
  dialog.show();
});

// Setup an event listener for the close button.
closeBtn.addEventListener('click', function(e) {
  e.preventDefault();

  // Close the dialog.
  dialog.close();
});

有关更多详细信息，请参阅http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element

Answer 2

<dialog>HTML5 标记的文档草案可在此处获得： http ://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-dialog-element

基本上你可以使用show()和close()方法与对话框进行交互。

查看本教程以获取示例：http ://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element

确保您在 Chrome 中启用了此功能：

安装 Chrome Canary 后，转到 chrome://flags 并启用启用实验性 Web 平台功能标志。您需要重新启动浏览器才能使更改生效。