Javascript Reference - HTML DOM Dialog Object

The Dialog object represents an HTML <dialog> element.

Standard Properties and Events

The Dialog object supports the standard properties and events.

Dialog Object Methods

Method	Description
close()	Closes the dialog
show()	Shows the dialog
showModal()	Shows the dialog as a modal dialog

Dialog Object Properties

Property	Description
open	Sets or gets whether to open a dialog
returnValue	Sets or gets the dialog's return value

Example

We can access a <dialog> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<dialog id="myDialog">This is an open dialog window</dialog>
<script>
function myFunction() {<!--from   w ww  . j  av  a 2s  .c  om-->
    var x = document.getElementById("myDialog");
    x.open = true;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create a <dialog> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from  www .ja  v  a  2 s .  co m-->
    var x = document.createElement("DIALOG");
    var t = document.createTextNode("This is an open dialog window");
    x.setAttribute("open", "open");
    x.appendChild(t);
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: