Introduction to html5.2 dialog

This article mainly introduces the relevant information about the detailed introduction of html5.2 dialog. The content is quite good. I will share it with you now and give it as a reference.

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 were not implemented in mobile browsers. The support in html still needs to be improved. Here we take a look at a commonly used tag that is newly included in the standard. It is the dialog tag.

1. Written in front

Speaking of the dialog tag, many people may be unfamiliar with it. After all, this tag is only available for chrome browsing until the HTML5.2 standard is fixed. It is only supported by the device, so 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 id="Title">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 Likewise, 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 advantage 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 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 it is. The shutdown event used to trigger.

5. Others

Some of the performances of the dialog have been explained earlier. They may be incomplete or inaccurate, or they may be updated as time goes by. Features appear, welcome to add.

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).

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the implementation of html5 calling camera function

Introduction to html5 calling app sharing function

The above is the detailed content of Introduction to html5.2 dialog. For more information, please follow other related articles on the PHP Chinese website!