Community Learn Tools Library Leisure
search
English
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?

寻∝梦
Release： 2018-08-15 17:41:23
Original
4741 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!

Related labels：
HTML5 dialog的用法 HTML5 dialog实现模拟弹窗
source：php.cn
Previous article：How to use the aside tag in HTML5? Do you know how to use the HTML5aside sidebar? Next article：What does the header tag in HTML5 mean? Do you know how to use the header tag in HTML5?
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
Latest Articles by Author
Latest Issues
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
Select woocommerce related products using custom taxonomy with 3 level hierarchy I have a woocommerce store with a custom classification of "Sports". The classif...
From 2024-04-06 20:05:30
0
1
544
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Calculate the sum of fields in another table using MySQL SQL query I have a schema like this: User table with attributes "user_id" and "userna...
From 2024-04-06 19:39:29
0
1
441
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template