DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <dialog> Dialog Tag

#learnhtml #htmld

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Result:

Result

Download Sample File:

HTML-Dialog-TagDownload

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>
Enter fullscreen mode Exit fullscreen mode

Result:

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>
Enter fullscreen mode Exit fullscreen mode

Result:

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:

The post HTML Dialog Tag appeared first on Share Point Anchor.

Top comments (0)