HTML Dialog Tag

The <dialog> tag is new in HTML5.

The <dialog> tag is used to create a popup dialog box or modal window. Think of it as a little floating window on a webpage where you can show messages, forms, or any extra content you want users to interact with.

This tag makes it easy to create popups without needing external JavaScript libraries. It’s supported in most modern browsers and is part of the HTML5 standard.

Syntax -
<dialog>Your popup content goes here.</dialog>
AttributeDescription
OpenBoolean attribute. If present, the dialog is open by default.
idUsed to target the dialog in JavaScript.
classUsed to apply CSS styles.
Example -

Scenario1 - Full HTML Dialog Demo

<!DOCTYPE html>
<html>
	<head>
		<title>dialog tag text example.. </title>
	    <style>
		dialog {
		  padding: 20px;
		  border: none;
		  border-radius: 10px;
		  box-shadow: 0 0 10px #aaa;
		  width: 250px;
		}
		</style>
	</head>
	<body>
	 <h2>Click the button to see a dialog</h2>

	 <button onclick="document.getElementById('infoBox').showModal()">
		Show Info</button>

	 <dialog id="infoBox">
	  <p>This is a dialog message. You can place any content here.</p>
	  <button onclick="document.getElementById('infoBox').close()">
		Close</button>
	 </dialog>
	</body>
</html>
Output -

Click the button to see a dialog

This is a dialog message. You can place any content here.