HTML - Dialog


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

For 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>
  • The javascript
var ship = document.getElementById('ship');
ship.onclose = function (event) {
    if (ship.returnValue == 'board') {
       console.log("Board the ship");
   } else {
       console.log("Call the capitain");
  • Output:


  • The open attribute is a boolean attribute. It indicates that the dialog element is active/open (default to false, not open)
<dialog open>
  • API:
// Displays the dialog element.
// Displays the dialog element and makes it the top-most modal dialog.
// This method honors the autofocus attribute.
// 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

Powered by ComboStrap