HTML Dialog

The <dialog> tag is used to define a dialog box such as a popup or modal window that is rendered within the active browser window. The <dialog> element uses an attribute called open that activate the element.

HTML Dialog Tag

Below is the example of using the dialog tag. Have a look at it to understand properly how to use it.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Dialog Tag </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p><b>Note:</b> The dialog tag is not supported in Edge/Internet Explorer.</p>
<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>25</td>
<td>29</td>
</tr>
</table>
</body>
</html>

Output

HTML Dialog Tag
January This is an open dialog window February March
31 25 29

Dialog Box With Javascript

It can also be used with javascript to enhance the interactivity like the example below.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Prompt Dialog Box </title>
</head>
<body>
<script>
var name = prompt("What's your name?");
if(name.length > 0 && name != "null") {
document.write("Hi, " + name);
} else {
document.write("Hello Anonymous!");
}
</script>
</body>
</html>

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<dialog>
Yes
Yes
Yes
Yes
Yes








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.