如何关闭Html5对话框

Question

首先，我在我的html中得到一个对话框。

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

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

如何实现？

另外，我有一个提交按钮来显示对话框。 如何显示它？

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

- user2988394

---

<dialog>标签目前仅在Chrome和Safari 6中受支持。那么你正在使用哪个浏览器？ - Anand Jha

为什么不使用自定义对话框而使用HTML5对话框，因为大多数浏览器都不支持它。 - Anand Jha

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

（该链接介绍了新的对话框元素）。

- Anand Jha

Answer 2

HTML5标签<dialog>的文档草稿可在此处获得：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并启用Enable experimental Web Platform features标志。 您需要重新启动浏览器才能使更改生效。

- sdabet

---

谢谢你提供的链接...我会尝试去做...但是当我点击按钮时，什么也没有发生...你有任何示例或代码可以给我展示吗？谢谢 :) - user2988394

你在Chrome中启用了Web平台功能吗？（请参见我的编辑） - sdabet