Dialog Element Overview
However, this feature is not compatible yet on edge neither safari, while is supported by chrome, firefox,..etc.
Dialog Element Background
After taken some general introduction of Dialog Element, spend time to know <dialog> element of HTML 5 (5.1) . It consider as “Sectioning root” , which that mean is similar to <body>, <blockquote>, and <details> elements. The sectioning root are element which create a new content section independently, that would means you may place either in body child or nest it within elements such as <div> or < section > as discuss Thoriq Firdaus article “Native popups and modals with HTML5 “dialog” Element.
The element as any other element need open and close tag as following
The attribute which came with the tag is open, the open attribute shows that dialog is active. So as the following example would show you that how to active and de-active the dialog element.
The following script is for an active dialog example
The following script is for de active dialog example
Also, can be used with Global Attributes and Event attribute of HTML.