HTML - Dialog

About

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

For example:

• a dialog box,
• inspector,
• or window.

Example

• The HTML with a form and two submit button.

<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

• Dialog reference
• Example Ref