search

Home >Web Front-end >H5 Tutorial >What is HTML5 dialog? How to use dialog in HTML5 to simulate pop-up windows?

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

寻∝梦
寻∝梦Original
2018-08-15 17:41:234743browse

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:

a38fd2622755924ad24c0fc5f0b4d412 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>

Tips and Notes:

Tip: Every sentence in the dialogue must belong to the 73de882deff7a050a357292d0a1fca94 tag defined part. Please see the example below.

Tag definition and usage instructions:

a38fd2622755924ad24c0fc5f0b4d412 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>

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 a38fd2622755924ad24c0fc5f0b4d412 element to achieve this effect.

Use the dialog element:

a38fd2622755924ad24c0fc5f0b4d412 is an HTML5 (5.1 to be precise) element. It is classified as a "slice root", similar to the 6c04bd5ca3fcae76e30b72ad730ca86d, b8a712a75cab9a5aded02f74998372b4, and a5e9d42b316b6d06c62de0deffc36939 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 dc6dce4a544fdca2df29d5ac0ea9906b or 2f8332c8dcfd5c7dec030a070bf652c3 - both 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) will render the a38fd2622755924ad24c0fc5f0b4d412 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(); 
  });

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 a38fd2622755924ad24c0fc5f0b4d412 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 a38fd2622755924ad24c0fc5f0b4d412 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!

JavaScript html5 chrome safari html 切片 事件 伪元素 ux
Statement：
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
Previous article：How to use the aside tag in HTML5? Do you know how to use the HTML5aside sidebar?Next article：How to use the aside tag in HTML5? Do you know how to use the HTML5aside sidebar?

Related articles

See more