Ejlal Alkhuzaei
Dialog Element

Dialog Element Overview

HTML 5 (5.1 to be exact) has introduced a new element which dialog, the dialog element is like most wanted feature in development, as in web development we depend on Javascript to Massage box or dialog box.

By Introduce this feature would ease development side and minimize the use of the javascript as most of the time developer try to do that. As that has been said still creating dialog or message box with dialog element not yet able to do the full job without relay on some javascript, but in hopefully in next version of HTML we would have more attribute in the script to enable developers to use dialog element with the very minimum use of Javascript.

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

<dialog >

</dilog >

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.

Active Dialog

The following script is for an active dialog example

<dialog open>

</dilog >

 

De-active Dialog

The following script is for de active dialog example

<dialog >

</dilog >

Also, can be used with Global Attributes and Event attribute of HTML.  

Source :