HTML - Dialog

About

A dialog in HTML represents a part of an application that a user interacts with to perform a task

For example:

Example

<dialog id="ship">
 <form method=dialog>
  <p>A ship has arrived in the harbour.</p>
  <button type=submit value="board">Board the ship</button>
  <button type=submit value="call">Call to the captain</button>
 </form>
</dialog>
  • The javascript
var ship = document.getElementById('ship');
ship.showModal();
ship.onclose = function (event) {
    if (ship.returnValue == 'board') {
       console.log("Board the ship");
   } else {
       console.log("Call the capitain");
   }
 };
  • Output:

Syntax

  • The open attribute is a boolean attribute. It indicates that the dialog element is active/open (default to false, not open)
<dialog open>
</dialog>
  • API:
// Displays the dialog element.
dialog.show()
// Displays the dialog element and makes it the top-most modal dialog.
// This method honors the autofocus attribute.
dialog.showModal()
// Closes the dialog element.
// The argument, if provided, provides a return value.
dialog.close([ result ])
// Returns the dialog's return value.
// Can be set, to update the return value.
dialog.returnValue [ = result ]

Documentation / Reference





Discover More
HTML - (Document) Outline

This article talks: the extraction of the outline from a HTML document in order to create a HTML Table of Content The outline also known as the table of content is a list of one or more potentially...
What is an HTML Form?

form is an element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken from the...
What is and how to create a web modal in pure HTML, Bootstrap and Jquery?

A modal is a overlay window behavior: where its contents are the only elements that can receive focus. When open, the user cannot interact with the rest of the page (nor can screen readers) until...



Share this page:
Follow us:
Task Runner