HTML Dialog tag is used to create a new popup dialog box or alert box on a web page. You can create pop-up messages , alert messages , or forms by using this tag. It is the new sectioning element in HTML 5.
Normally, the dialog box is hidden from user view , you can activate it by using the “open” attribute. For styling the tag, you can use the CSS “::backdrop“ pseudo-element.
Info : If you need to display/hide the content within the tag, you must use the JavaScript API.
To combine the element within the dialog, it should be specified with the method=”dialog” attribute and the dialog tag is closed with the “returnValue“ attribute.
Estimated reading time: 5 minutes
Syntax:
The dialog contains both the starting tag and ending tag. The Content is written between these two tags.
<dialog open> Write your text here.. </dialog>
HTML Tag Characteristics:
th, td{ padding: 20px; }
| HTML tag | Used to create a dialog box |
| Content categories | Flow content, Sectioning root. |
| Permitted content | Flow content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts flow content. |
| Implicit ARIA role | dialog |
| Permitted ARIA roles | alertdialog |
| DOM interface | HTMLDialogElement |
Sample of HTML Tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML <dialog> Dialog Tag</title>
</head>
<body>
<h2>Example of HTML <dialog> tag</h2>
<dialog open>Welcome to Share Point Anchor</dialog>
</body>
</html>
Result:
Download Sample File:
Use CSS property to style an HTML Tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML <dialog> Dialog Tag</title>
</head>
<style>
dialog {
color: #C40655;;
font-size:30px;
font-weight:bold;
font-style:italic;
}
body {
text-align:center;
}
</style>
<body>
<h2>Example of HTML <dialog> tag with CSS property</h2>
<dialog open>Welcome to Share Point Anchor</dialog>
</body>
</html>
Result:
HTML tag with JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>HTML <dialog> Dialog Tag</title>
<style>
dialog {
width: 40%;
color: Green;
text-align:center;
font-size:30px;
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<div>
<dialog id="DialogExample">
<p>
Welcome to Share Point Anchor
</p>
<button id="hide">Close dialog text</button>
</dialog>
<button id="show">Clik here to Open</button>
</div>
<script type="text/JavaScript">
(function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
</script>
</body>
</html>
Result:
Attributes:
The Dialog tag supports the global attributes and the event attributes in HTML.
th, td{ padding: 20px; }
| Attribute | Value | Description |
|---|---|---|
| open | open | This attribute will idicate that the dialog box is active , and the user can interact with it. |
Styling Methods for Tag:
You can use the following properties to style an HTML Dialog tag.
Properties to style the visual weight/emphasis/size of the text in tag:
- CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- CSS font-size – This CSS property will help to set the size of the font.
- CSS font-weight – This CSS property used to define whether the font should be bold or thick.
- CSS text-transform – This CSS property will control the text case and capitalization.
- CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.
Styles to coloring the text in Tag:
- CSS color – This CSS property will specify the color of the text content and decorations.
- CSS background-color – This CSS property helps to set the background color of an element.
Text layout styles for Tag:
- CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
- *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- CSS white-space – This CSS property describes how white-space inside an element is handled.
- CSS word-break – This CSS property decides where the lines should be broken.
Other Properties for Tag:
- CSS text-shadow – This CSS property helps to add the shadow to text.
- CSS text-align-last – This CSS property will set the alignment of the last line of the text.
- CSS line-height – This CSS property defines the height of a line.
- CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
- CSS word-spacing – This CSS property specifies the spacing between every word.
Browser Support:
Related Articles:
- HTML
- Definition Description Tag
- HTML
Center Tag - Basic HTML Definitions and Usages in the Real World
- HTML
Code Tag - HTML Aside Tag
The post HTML Dialog Tag appeared first on Share Point Anchor.
Top comments (0)