Detailed introduction to html5.2 dialog

On December 24, 2017, the HTML5.2 standard was solidified, which also meant that the mobile terminal entered the HTML5.3 planning stage. Although HTML5.2 was solidified, some new internal specifications have yet to be supported by mobile browsers. To improve, here we take a look at a commonly used tag that is newly incorporated into the standard, it is the dialog tag.

Speaking of the dialog tag, many people may be unfamiliar with it. After all, this tag was only supported by the Chrome browser until the HTML5.2 standard was fixed. As for the use of this tag, it can be clearly understood based on the semantics. Session .

What we may think of here is alert, confirm and other pop-up windows. Yes, they are of the same family, they are all pop-up boxes. Next, we will briefly take a look at some properties and usage scenarios of the dialog tag.

 <dialog open=> <h2>Title</h2> <p>Content</p></dialog>

Since it is a tag, it is actually the same as our commonly used div, p and other tags. 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, yes, this is used to control the display and hiding of this pop-up window. Of course, you can also use css to control it arbitrarily, just like that Abnormalities may occur when using the auxiliary functions of some devices (such as accessibility, screen reading software, etc.), so it is recommended to use the show and hide functions in the standard.

First of all, the dialog tag is an example of HTMLDialogElement and inherits from HTMLElement. Therefore, it is a tag of the same level as the div tag. The only difference is that it has more default functions than div. In this section, we Let's take a look at what default methods dialog has for us to use.

 var dialog = document.getElementById(dialog);// Assume that there is a dialog tag with id=dialog in the page // Close dialogdialog.close(); // Display dialog in the form of toastdialog.show(); // In model Display dialogdialog.showModal();// The parameter value passed in when dialog.close() is called dialog.returnVlaue;// The display status of dialog dialog.open;

You can go to the example first, operate it, and then see what features it has, and then come back to compare. The following summary:

1: The close method can be called multiple times, even in the hidden state, and can be called again.

2: close can pass in a variable, which must be a string and expressed in returnVlaue.

3: The show method can also be called multiple times, even in the hidden state, without any problems.

4: The show method will not change the position of the toast. The pop-up box is still at the original position after the show method is called.

5: show method, the display position is immediately behind the previous element, centered, without a mask layer behind it. The display mode of z-index is similar to that of relative without setting z-index (if showModal has not been called before) ).

6: If showModal has been called, after the show method, the element is displayed at the position displayed by showModal and will not change (even if the content height changes a lot).

7: If there are two dialog elements, both call the show method. In the html structure, the latter dialog will always cover the previous one (regardless of which dialog calls the show method first).

8: There will be a mask layer behind the display of showModal. The display level is at the browser webview level. How to understand it? You can set an element with a very high level. After using showModal to display the dialog attribute, the dialog will be at the end. The previous point is particularly suitable for modal boxes. There will definitely be no hierarchical confusion after the pop-up box appears.

9: showModal can only be called once. The one time here means that if the dialog is in the display state, then an error will be reported when showModal is called again, and it cannot be executed directly. In other words, as long as the open attribute exists, calling it again will An error is reported, so it is better to use the default open attribute to show and hide the dialog.

10: If there are two dialog elements on the page and both are calling the showModal method, regardless of their structure in HTML, the level of the dialog called later will be higher than the level of the dialog called previously.

11: The value of dialog.returnVlaue is the value passed in when calling dialog.close(string). It only supports strings. The value passed in when dialog.close is called is only valid when the dialog is displayed.

12: If no value has been passed in close, the value of returnVlaue will be empty. If a value is passed to dialog.close(1), after the next show, dialog.close() is closed, and returnVlaue is still equal to 1.

13: The return value of open is: true/false.

Another advantage of dialog is that in addition to basic events such as click, it supports two additional special events for dialog:

 var dialog = document.getElementById(dialog); // Assume that there is a dialog tag with id=dialog in the page // When the close method is called dialog.onclose = function(){}; // When esc is pressed on the pc side When pressing the key. But after the chrome version, it doesn't seem to work anymore. dialog.oncancel = function(){};

Now let's look at an example: dialog event example display.

There are also several questions, let’s list them here:

1: Only by calling dialog.close() to hide the dialog can the onclose event be triggered.

2: After the cancel event is triggered, the close event will definitely continue to be triggered. After the chrome64 version, cancel is not triggered by the esc key.

3: If there are multiple buttons to close the dialog, then pass in a different value each time close is called. In the callback of the close event, use the value of returnVlaue to determine which button is used to trigger the close event. .

Some of the performances of the dialog have been explained previously. They may be incomplete or inaccurate, or newer features may appear over time. Any additions are welcome.

When looking at the previous examples, we also saw some shortcomings, such as: the style is particularly ugly. Regarding this, we can completely reset the style using CSS without affecting the semantics or anything else. You can rest assured that you can refactor it. That's it.

I just want to talk about the performance of dialog here, so I won’t do that.

After all, dialog is a semantic label for pop-up dialogs, and it has some unique advantages (such as the height of the webview level). Although it is only supported by Chrome now, it is still very promising for future use, and it is even compatible with itself now. Now, in other browsers, implement a set of dialog mechanisms by yourself (maybe there is already an implementation plan for this, so I won’t look for it here).

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.