HTML5 Definition and usage of dialog tags:
<dialog> tags define conversations, such as conversations.
Here are some examples:
<dialog> <dt> teacher </dt> <dd>1+1 equals? </dd> <dt> students </dt> <dd>2</dd> <dt> teachers </dt> <dd> That's correct! </dd></dialog>
Tips and Comments:
Tip: Each sentence in a conversation must belong to the section defined by the <dt> tag. Take a look at the example below.
Label definition and usage instructions:
<dialog> tags Define a dialog box, confirmation box, or window.
Here is an example:
<table border= "1" ><tr> <th>january <dialog open>this is an open dialog window</dialog ></th> <th>February</th> <th>March</th></tr><tr> < td>31</td> <td>28</td> <td>31</td></tr></table>
HTML5 dialog Tag Properties:
Open:open specifies that the dialog element is valid and that the user can interact with it.
Recently, many processes on the Web page require the user's full consent to complete. For example, users may need to delete accounts, change their user names, or confirm currency transactions.
In this case, the common user experience (Ux,user experience design) is to display a dialog box with two buttons. One is cancel, one is to continue. Over the years, we've been relying on JavaScript libraries to do this, but in this article, we're going to use the <dialog> element to achieve this effect.
Using the dialog element:
<dialog> is a HTML5 (exactly 5.1) element. It is categorized as "slice root", similar to <body>,<blockquote>, and <details> elements, each of which creates a new, separate content area that you can use as a child of the body, or as a nested element, such as <div> or <section>--Two elements are valid, as shown below.
<body> <div> <dialog></dialog> </div> <section> < dialog></dialog> </section> <dialog></dialog></body>
By default, supported browsers (Chrome 37+ and opera 27+) render <dialog> elements in a hidden form, and only the show () or ShowModal () method that calls JavaScript can appear, calling close () method to hide it again. Typically, we will execute this method on a click event, as follows:
var $accountDelete = $ (' #delete-account '), $accountDeleteDialog = $ (' #confirm-delete '); $accountDelete. On (' click ', Function () { $accountDeleteDialog [0].showmodal (); }); $ (' #cancel '). On (' click ', Function () { $accountDeleteDialog [0].close (); });Custom styles:
Like most other elements, a dialog box can easily overwrite the browser's default style. So, you can customize its style. For example, make the dialog box border thinner, round the corners, add shadow effects, and so on.
In addition, when the <dialog> element is modal (using the ShowModal () method), we add an additional pseudo-element:: Backdrop. :: The backdrop element immediately resides underneath the dialog box, overwriting the entire viewport and the other elements below it.
Browser support:
Currently, only Chrome and Safari 6 support <dialog> tags.
"Recommended"
What are the attributes of the HTML img tag? Learn about the use of IMG tags
What is the web in HTML5? What are the elements in Web Storage?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
