At first, I get a dialog in my html

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

And then, I need a JS function to close or hide it.

How to do it ?

Also i have a submit button to show the dialog. How to show it ?

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

At first, I get a dialog in my html

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

And then, I need a JS function to close or hide it.

How to do it ?

Also i have a submit button to show the dialog. How to show it ?

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

• javascript
• html
• dialog

• The <dialog> tag is currently only supported in Chrome, and Safari 6. so in which browser you are working? – Anand Jha Commented Nov 13, 2013 at 15:53
• why don't you use costume dialog rather using HTML5-dialog, because most of the browser doesn't support it. – Anand Jha Commented Nov 13, 2013 at 16:33

2 Answers 2

Try this,

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

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

JS script

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

for more details see http://blog.teamtreehouse./a-preview-of-the-new-dialog-element

The documentation draft for the <dialog> HTML5 tag is available here: http://www.w3/html/wg/drafts/html/master/interactive-elements.html#the-dialog-element

Basically you can use the show() and close() methods to interact with the dialog.

Check this tutorial for an example: http://blog.teamtreehouse./a-preview-of-the-new-dialog-element

Make sure that you enabled this feature in Chrome:

Once you have Chrome Canary installed go to chrome://flags and enable the Enable experimental Web Platform features flag. You will need to restart the browser for the change to take effect.