Home > Web Front-end > H5 Tutorial > body text

What is HTML5 dialog? How to use dialog in HTML5 to simulate pop-up windows?

寻∝梦
Release: 2018-08-15 17:41:23
Original
4712 people have browsed it

What is HTML5 dialog? How to use dialog in HTML5 to simulate pop-up windows? This article mainly describes the definition and specific usage of the dialog tag in HTML5, and how to simulate pop-up windows through the dialog tag in HTML5.

Definition and usage of HTML5 dialog tag:

tag defines a dialog, such as a conversation.

Here are examples:

<dialog>
  <dt>老师</dt>
  <dd>1+1 等于?</dd>
  <dt>学生</dt>
  <dd>2</dd>
  <dt>老师</dt>
  <dd>答对了!</dd>
</dialog>
Copy after login

Tips and Notes:

Tip: Every sentence in the dialogue must belong to the

tag defined part. Please see the example below.

Tag definition and usage instructions:

The tag defines a dialog box, confirmation box or window.

This 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>
Copy after login

HTML5 dialog tag attribute:

open: open specifies that the dialog element is valid and the user can interact with it .

Recently, many processes on the web require the user's full consent before they can be completed. For example, users may need to delete an account, change their username, or confirm a monetary transaction.

In this case, the common user experience (UX, User experience design) is to display a dialog box with two buttons. One is to cancel and the other is to continue. For many years, we have relied on JavaScript libraries to achieve this effect, but in this article, we are going to use the

element to achieve this effect.

Use the dialog element:

is an HTML5 (5.1 to be precise) element. It is classified as a "slice root", similar to the ,
, and
elements, each of which creates a new independent content area that you can treat as a child of body, Or a nested element such as
or
- both are valid, as shown below.

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>
Copy after login

By default, supported browsers (Chrome 37 and Opera 27) will render the

element in a hidden form. It can only be displayed by calling the JavaScript show() or showModal() method. Call the close() method to hide it again. Normally, we would execute this method on a click event, like this:

var $accountDelete = $(&#39;#delete-account&#39;), 
      $accountDeleteDialog = $(&#39;#confirm-delete&#39;); 
  $accountDelete.on(&#39;click&#39;, function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $(&#39;#cancel&#39;).on(&#39;click&#39;, function() {
      $accountDeleteDialog[0].close(); 
  });
Copy after login

Custom styles:

Like most other elements, Dialog boxes can easily override the browser's default styling. So, you can customize its style. For example, make the dialog box borders thinner, round the corners, and add shadow effects, etc.

In addition, when the

element is displayed modally (using the ShowModal() method), we add an additional pseudo-element::backdrop. The ::backdrop element immediately resides below the dialog box, covering the entire viewport and other elements below it.

Browser support:

Currently, only Chrome and Safari 6 support the

tag.

[Related recommendations]

What are the attributes of the HTML IMG tag? Understand the usage of IMG tag

What is web in HTML5? What are the elements in web storage?

The above is the detailed content of What is HTML5 dialog? How to use dialog in HTML5 to simulate pop-up windows?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template