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を参照してください。