javascript - How to close the Html5 dialog - Stack Overflow

admin管理员组

文章数量:1333158

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

Share Improve this question Follow edited Jan 7, 2019 at 11:06 Nuno Cruces 1,7731717 silver badges1818 bronze badges asked Nov 13, 2013 at 15:43 user2988394user2988394 8922 silver badges66 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

本文标签： javascriptHow to close the Html5 dialogStack Overflow