How to create a dialog box or window in HTML ?
In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5.
Syntax:
<dialog open> Contents... </dialog>
Example 1:
<!DOCTYPE html> <html> <head> <title> How to define a dialog box or window? </title> <style> dialog { color: green; font-size: 30px; font-weight: bold; font-style: italic; } body { text-align: center; } </style> </head> <body> <h1> <dialog> tag </h1> <dialog open> Welcome to GeeksforGeeks </dialog> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> How to define a dialog box or window? </title> <style> table, th, td { border: 1px solid red; } </style> </head> <body> <center> <h2>GeeksForGeeks</h2> <h2> How to define a dialog box or window </h2> <dialog open> This is an open dialog window </dialog> </center> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
