HTML | DOM Dialog Object
The DOM Dialog Object is used to represent the HTML <dialog> element. The Dialog element is accessed by getElementById(). It is used in HTML5.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “Dialog” tag.
Example-1:
<!DOCTYPE html> <html> <head> <title>DOM dialog Object</title> <style> dialog { color: green; font-size: 30px; font-weight: bold; font-style: italic; } body { text-align: center; } </style> </head> <body> <h1>DOM Dialog Object</h1> <!-- Assigning id to dialog tag --> <dialog id="GFG">Welcome to GeeksforGeeks</dialog> <button onclick="myGeeks()" open>Submit</button> <script> function myGeeks() { // Accessing dialog tag var x = document.getElementById("GFG"); x.open = true; } </script> </body> </html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: Dialog Object can be created by using the document.createElement Method.
<!DOCTYPE html> <html> <head> <title>DOM dialog Object</title> <style> dialog { color: green; font-size: 30px; font-weight: bold; font-style: italic; } body { text-align: center; } </style> </head> <body> <h1>DOM Dialog Object</h1> <button onclick="myGeeks()" open>Submit</button> <script> function myGeeks() { var gfg = document.createElement("DIALOG"); var f = document.createTextNode("Welcome to GeeksForGeeks"); gfg.setAttribute("open", "open"); gfg.appendChild(f); document.body.appendChild(gfg); } </script> </body> </html> |
Output:
Before Clicking On Button :
After Clicking On Button:
Supported Browsers: The browser supported by DOM Dialog Object are listed below:
- Google Chrome 37+
- Opera 24+
- Safari 6+
Please Login to comment...