Description of html5.2 dialog and html5.2dialog

Description of html5.2 dialog and html5.2dialog

In December 24, 2017, the HTML5.2 standard was fixed, which also represented the Mobile End entering the HTML5.3 planning stage. Although HTML5.2 was fixed, some new internal specifications still need to be improved in support of mobile browsers, here we will look at a commonly used new standard tag, which is the dialog tag.

1. Preface

When talking about the dialog tag, it may be unfamiliar to many people. After all, this tag is not supported by the HTML standard, but only by the chrome browser. As for its usefulness, according to the semantics, we can also clearly understand the session.

Here we may think of pop-up windows like alert and confirm. Yes, they belong to the same family and are all pop-up boxes. Let's take a look at them briefly, some attributes and application scenarios of the dialog tag.

2. label usage

<dialog open="">       
Since it is a tag, it is actually the same as the commonly used div, p, and other labels. As shown in the sample code above, it supports any other elements internally.
Here, you may notice that the open attribute in the above sample code is, yes, used to control the display and hiding of the pop-up window. Of course, you can also use css to control it as you wish, but exceptions may occur in some auxiliary functions of devices (such as accessibility and screen reading software, therefore, we recommend that you use the standard display and hide functions.
3. Supported default methods
First, the dialog tag is an example of HTMLDialogElement inherited from HTMLElement. Therefore, the tag and div belong to the same level. The only difference is that, it has more default functions than div. In this section, let's take a look at the default methods available for dialog.
Var dialog = document. getElementById ("dialog"); // assume that there is a dialog tag with id = dialog // disable dialogdialog. close (); // display dialogdialog in toast format. show (); // display dialogdialog in a modal box. showModal (); // dialog. the dialog parameter value passed in when close () is called. returnVlaue; // The display status of dialog. open;
You can perform the following operations on your own in the example, and then see what features are available. Then you can come back and compare them. The following is a summary:
1: The close method can be called multiple times. Even if it is hidden, it can be called again.
2: close can be used to input a variable. The variable must be a string, which is expressed in returnVlaue.
3: The show method can also be called multiple times. Even in the hidden state, there will be no problems.
4: The show method does not change the toast position. The position of the pop-up box is originally located. After the show method is called, it is still in the original position.
5: show method. The display position is next to the back of the previous element and centered. There is no mask layer, the Display Method of z-index is similar to that of relative without setting z-index (if showModal is not called before ).
6: After showModal is called, after the show method is called, the position of the element displayed in showModal is not changed (even if the content height changes a lot ).
7: if there are two dialog elements, the show method is called. In the html structure, the subsequent dialog will always overwrite the previous upper layer (no matter which dialog calls the show method first ).
8: There is a mask layer behind the display of showModal. The display level is at the webview level of the browser. To understand this, you can set an element with a very high level, after showModal is used to display the dialog attribute, the dialog is at the top of the list. This is especially suitable for modal boxes. It will certainly not cause level confusion after the pop-up box appears.
9: showModal can be called only once. Here, if dialog is in the display status, an error is reported when showModal is called again, and it cannot be executed directly, or, if the open attribute exists and is called again, an error is reported. Therefore, it is better to hide the dialog display using the default open attribute.
10: if there are two dialog elements on the page, all of them are calling the showModal method. No matter their structure in HTML, the level of the dialog called later will be higher than the level of the previously called dialog.
11: dialog. the value of returnVlaue is dialog. the value passed in when close (string) is called. Only strings are supported. dialog is called only when dialog is displayed. the value passed in by close is valid.
12: If the value has not been passed in close, the value of returnVlaue is null. close ("1"), after the next show, dialog. close () is disabled, and returnVlaue is still equal to "1 ".
13: the return value of open is true/false.
4. Supported default events
Another benefit of dialog is that dialog supports two additional special events for dialog except basic events such as click:
Var dialog = document. getElementById ("dialog"); // assume that the page contains a dialog tag with id = dialog // dialog when the close method is called. onclose = function () {}; // when you press esc on the pc side. However, it seems that the chrome version does not work anymore. Dialog. oncancel = function (){};
Here is an example: the dialog event example is displayed.
There are also a few questions. Let's list them here:
1: The onclose event can be triggered only when dialog. close () is called to hide the dialog.
2: After the cancel event is triggered, the close event will be triggered again. After the chrome64 version, the cancel event will be triggered, not the esc button.
3: if there are multiple buttons to close the dialog, different values will be input each time close is called. In the callback of the close event, the value of returnVlaue will be used to judge, which button is used to trigger the Close event.
5. Others
The preceding descriptions of dialog may be incomplete or inaccurate, or with the passage of time, updated features may appear.
When looking at the previous example, we also see some shortcomings, such as: the style is very ugly. We can completely use CSS to reset the style without affecting the semantics, and anything else, you can do it with confidence.
Here I just want to talk about the performance of dialog, so I will not do this.
6. Summary
After all, dialog is a semantic tag of pop-up dialog and has some unique advantages (such as the webview level height). Although it is only supported by chrome, it will be used in the future, I am still very optimistic about it. Even now I can be compatible with myself. In other browsers, I can implement a set of dialog (maybe I already have this implementation scheme, I will not find it here ).
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.