Javascript 如何关闭Html5对话框

Javascript 如何关闭Html5对话框,javascript,html,dialog,Javascript,Html,Dialog,首先,我在html中得到一个对话框 <dialog open> <button id="close">Close</button> </dialog> 然后,我需要一个JS函数来关闭或隐藏它 怎么做 我还有一个提交按钮来显示对话框。 如何展示 <input type="Submit" value="Submit" id="show" /> 试试这个 <dialog id="dialog"> <p>Hi

首先,我在html中得到一个对话框

<dialog open>
  <button id="close">Close</button>
</dialog>
然后,我需要一个JS函数来关闭或隐藏它

怎么做

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

<input type="Submit" value="Submit" id="show" />
试试这个

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

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

有关更多详细信息,请参见HTML5标签的文档草稿:

基本上,您可以使用show和close方法与对话框交互

查看本教程以获取示例:

确保已在Chrome中启用此功能:

一旦安装了Chrome Canary,请转到chrome://flags 并启用“启用实验Web平台功能”标志。要使更改生效,您需要重新启动浏览器


该标签目前仅在Chrome和Safari 6中受支持。那么您使用的是哪个浏览器?为什么不使用Costude dialog而不是HTML5 dialog,因为大多数浏览器都不支持它。是的……我不知道为什么它不工作……当我单击“确定”时……什么都没有发生。这可能是浏览器的问题,你可能需要在Chrome中安装Chrome Canary。谢谢你的链接…我试着这么做..当我点击我的按钮..什么都没发生..你有任何例子或代码给我看吗?谢谢:您是否在Chrome中启用了Web平台功能?查看我的编辑
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();
});