Home »
HTML »
HTML Dialog Tag
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.
Example
Try this code »
<!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>
<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
| January | February | March |
|---|---|---|
| 31 | 25 | 29 |
Dialog Box With Javascript
It can also be used with javascript to enhance the interactivity like the example below.
Example
Try this code »
<!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>
<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
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<dialog> |
Recommended :