Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use dialog in html". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use dialog in html" can help you solve the problem.

1. Write at the front

Speaking of dialog tags, many people may be unfamiliar, after all, this tag until the HTML5.2 standard is fixed, only chrome browsers support, then as for the use of the tag, according to the semantics can also be clearly understood, conversation.

What we might think of here is that alert, confirm and other pop-up windows, yes, they are from the same family, are all pop-up boxes, and then we will simply take a look at some of the attributes and usage scenarios of the dialog tag.

two。 Label u

Title

Content

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, which internally supports any other elements.

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 wayward use css to control, but in that way in some device accessibility features (such as barrier-free access, screen reading software, etc.), there will be an exception, so it is recommended to use the standard show and hide function.

3. Supported default method

First of all, the dialog tag is an example of HTMLDialogElement, inherited from HTMLElement, so it belongs to the same level of tags as div. The only difference is that it has more default features 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 of id=dialog on the page / / close dialogdialog.close (); / / display dialogdialog.show () as toast; / / display dialogdialog.showModal () as modal box; / / display status dialog.open of parameter value dialog.returnVlaue;// dialog passed in when calling / / dialog.close ()

You can first go to the example, do it, and then see what the features are, and then come back and compare it with the following summary:

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

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

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

4: the show method does not change the location of the toast, where the pop-up box was originally located, and the show method is still in the original position after the call.

5: show method, the display position is immediately behind the previous element, centered, and there is no mask layer behind it. The display of z-index is similar to the way relative does not set z-index (if showModal has not been called before).

6: if you call showModal, after the show method, the element is displayed in the location displayed by showModal and will not change (even if the height of the content has changed a lot).

7: if there are two dialog elements, both call the show method, in the html structure, the later dialog will always overwrite the previous upper layer (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, in the use of showModal to display dialog properties, dialog is in the front, this is particularly suitable for modal boxes, certainly not in the pop-up box, after the emergence of hierarchical confusion.

9: showModal can only be called once. Once here, if dialog is in the display state, if showModal is called again, an error will be reported and cannot be directly executed. In other words, as long as the open attribute is present and called again, an error will be reported, so it is better to use the default open attribute to hide the dialog.

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

11: the value of dialog.returnVlaue is the value passed in when dialog.close (string) is called. Only strings are supported. The value passed in by calling dialog.close is valid only when dialog is displayed.

12: if the value has not been passed in close, then the value of returnVlaue is empty, if the value dialog.close ("1") is passed one time, and then after the next show, dialog.close () is turned off and returnVlaue is still equal to "1".

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

4. Default events supported

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

Var dialog = document.getElementById ("dialog"); / / suppose there is a dialog tag for id=dialog in the page / / when the close method is called, dialog.onclose = function () {}; / / when the esc key is pressed on the PC side. But after the chrome version, it doesn't seem to work. Dialog.oncancel = function () {}

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

There are also a few questions, which are listed here:

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

2: after the cancel event is triggered, the close event must continue to be triggered. After the chrome64 version, the trigger of the cancel is not the esc button.

3: if there are multiple buttons to disable dialog, pass a different value each time you call close. In the callback of the close event, use the value of returnVlaue to determine which button is used to trigger the shutdown event.

This is the end of the content about "how to use dialog in html". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.