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 > |
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 > |
Output:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari