Detailed explanation of using html5 dialog

1. Written in front

Speaking of the dialog tag, many people may be unfamiliar with it. After all, this tag is only supported by the Chrome browser until the HTML5.2 standard is fixed. Yes, as for the purpose of this tag, it can be clearly understood based on the semantics, conversation.

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 of the dialog tag. and usage scenarios.

2. Use tags

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

Since it is a tag, it is actually the same as our commonly used p, p and other tags, such as As shown in the sample code above, it supports arbitrary 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 as you like. To control, it will cause exceptions when using the auxiliary functions of some devices (such as accessibility, screen reading software, etc.), so it is recommended to use the standard display and hide functions.

3. Supported default methods

First of all, the dialog tag is an example of HTMLDialogElement, inherited from HTMLElement, so it belongs to the same category as the p tag. The only difference between hierarchical tags is that they have more default functions than p. In this section, we will take a look at what default methods dialog has for us to use.

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

You can go to the example first, operate it, and then see what the features are, 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 z-index display method is similar to the relative without z-index setting (if before this , if showModal has not been called).

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 and both show methods are called, in the html structure, the subsequent dialog will always cover the previous upper layer (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 , dialog are all at the front, which 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, or as long as the open attribute exists. If you call it again, an error will be 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. Only when the dialog is displayed, the value passed in by calling dialog.close value is valid.

12: If no value has been passed in close, the value of returnVlaue will be empty. If the value dialog.close("1") is passed once, dialog.close() will close after the next show. , 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 in addition to basic events such as click, it supports two additional special events for dialog. Event:

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

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

There are also several problems, 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 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 it is. The shutdown event used to trigger.

5. Others

The description of some performances of dialog may be incomplete or inaccurate as time goes by, and newer features may appear over time. Any additions are welcome.

When looking at the previous example, we also saw some shortcomings, such as: the style is particularly ugly. Regarding this, we can completely use CSS to reset the style without affecting the semantics and any other Things, just rest assured to refactor.

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

6. Summary

dialog is, after all, a semantic label for pop-up dialogs, and has some unique advantages (such as the height of the webview level), although it is only Chrome supports it, but it is still very promising for future use. Even now, you can make it compatible by yourself. In other browsers, you can implement a set of dialog mechanisms by yourself (maybe there is already an implementation plan for this, so I won’t go into it here. found).

Related recommendations:

html