HTML 5.2 dialog

Time:2019-8-11

December 24, 2017, HTML 5.2 standard solidification, also represents the mobile end into the HTML 5.3 planning stage, although HTML 5.2 solidification, but some new internal specifications in mobile browsers need to be improved support, here we see a commonly used new included standard label, it is dialog. Label.

1. Write in front

Speaking of dialog tag, many people may be unfamiliar with it. After all, the tag was not supported by Chrome browser until HTML 5.2 standard was fixed. As for the use of dialog tag, the semantics can clearly understand that conversation.

Here we may think of alert, confirm and other pop-up windows, yes, they are the same family, are pop-up boxes, then we will briefly look at some of the dialog tag attributes and use scenarios.

2. Label Use


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

Since it’s a label, it actually supports any other element internally, as shown in the example code above, just like our commonly used div, P and other labels.

Here, you may notice that the open attribute in the example code above is used to control the display and hiding of the pop-up window. Of course, you can also use CSS to control it willfully, just so that when some devices have auxiliary functions (such as accessibility, screen reading software, etc.), it will appear. It is unusual now, so it is recommended to use the display and hiding function in the standard.

3. Supported default methods

First of all, the dialog tag is an example of HTML DialogElement, inherited from HTML Element, so it belongs to the same level of tag as Div. The only difference is that it has more default functions than Div. In this section, let’s see what default methods dialog has for us to use.

var dialog = document.getElementById("dialog");
// Suppose there is a dialog tag with id = dialog in the page

// Close dialog
dialog.close();

// Display dialog as toast
dialog.show();

// Display dialog as a modal box
dialog.showModal();

// parameter values passed in when dialog. close () is called
dialog.returnVlaue;

// Display status of dialog
dialog.open;

You can go to the example first, operate it, then see what features, and then come back to compare, and then summarize:

1: close method, can be called many times, even if it is hidden state, can be called again.

2: close can pass in a variable, which must be a string, represented in return Vlaue.

3: Show method can also be called many times, even in the hidden state, there will be no problem.

4: Show method, will not change the location of toast, where the pop-up box was originally located, after the call of show method, still in its original location.

5: Show method, the display position is next to the previous element, in the middle, without the back mask layer, Z-index display mode is similar to that of relative without setting Z-index (if showModal has not been invoked before).

6: If showModal is invoked, then after the show method, the element is displayed in the location shown in showModal, and it will not change (even if the content height changes a lot).

7: If you have two dialog elements, call the show method. In the HTML structure, the dialog behind will always cover the upper layer in front (regardless of which dialog calls the show method first).

8: ShowModal display, there will be a mask layer behind, the display level is the browser WebView level, how to understand, you can set an element, the level is very high, using showModal display dialog properties, dialog is in the front, this is particularly suitable for making modal boxes, certainly not in the bullet. After the emergence of the box, there is a level of confusion.

9: ShowModal can only be called once. The first time here is to say that if dialog is in the display state, then calling showModal again will cause an error and cannot be executed directly. In other words, as long as the open attribute exists, if it is called again, it will cause an error. So we still use the default open attribute to do dia. Log shows better hiding.

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

11: The value of dialog. return Vlaue is the value passed in when dialog. close (string) is called. Only when dialog is displayed, the value passed in by dialog. close will be valid.

12: If the value of return Vlaue has not been passed in close, then the value of return Vlaue is empty. If dialog. close (“1”) is passed in one time, after the next show, dialog. close () is closed, and return Vlaue is still equal to “1”.

13:open returns true/false.

4. Supported default events

Another advantage of dialog is that it supports two additional special events for dialog besides basic events such as click:

var dialog = document.getElementById("dialog");
// Suppose there is a dialog tag with id = dialog in the page

// When the close method is called
dialog.onclose = function(){};

// When pressing the ESC button on the PC side. But after the chrome version, it seems that it doesn't work.
dialog.oncancel = function(){};

Now let’s look at an example: dialog event demonstration.

There are also several questions. Here are some examples:

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

2: After cancel event triggers, close event will continue to trigger. After chrome64 version, cancel trigger is not ESC key.

3: If there are many buttons to close dialog, different values are passed in each call to close. In the callback of close event, the value of return Vlaue is used to determine which button is used to trigger the closing event.

5. Other

Some of the dialog’s performances have been described in the previous section. It may be incomplete or inaccurate. It may also be that with the passage of time, new features appear. Welcome to add.

When we look at the previous examples, we also see some shortcomings, such as: the style is particularly ugly, on this point, we can completely use CSS to reset the style, without affecting semantics, and anything else, rest assured that refactoring can be done.

I just want to talk about dialog, so I don’t want to do that anymore.

6. Summary

After all, dialog belongs to the semantic label of pop-up dialogue, and has some unique advantages (such as the height of WebView level). Although it is only supported by chrome now, it is still very promising for future use. Even now it can be compatible with itself. In other browsers, it can implement a set of dialog by itself. Mechanisms (maybe we already have this implementation scheme, so we won’t look for it here).

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.