A brief discussion on trying out the dialog element in HTML5

Dialog boxes (also known as modal boxes and floating layers) are an important part of user interaction in web projects. The most common ones we use are alert() and confirm() in js. However, this dialog box is not beautiful and cannot be customized. style, so during the development process, we generally build wheels according to our own needs or use third-party ones.

Common forms of pop-up boxes:

Position: Upper left corner of the screen, upper right corner, lower left corner, lower right corner, vertical center, etc.

Size: fixed width and fixed height, fixed width and fixed height, variable width and fixed height, etc.

The dialog form under development is a case of random combination of position and size.

However, there is one situation (vertical centering with variable width and height) that is not easy to implement (you can use display:table or CSS3's translate or flex to achieve it). For details, please refer to the horizontal and vertical centering layout.

The above dialog box contains a container for content, and there is also a mask layer (mask) below the dialog box. The mask layer is a separation layer between the dialog box and the page body formed after the user triggers the pop-up box. Its existence It can give users a more obvious visual difference effect, and at the same time avoid other unnecessary page main operations after users trigger the dialog box, thereby producing a better user experience.

Although there are many dialog wheels for us to choose from, we face various problems.

• Which dialog box to choose (a headache for people with choice syndrome)
• Usability (whether the API is simple or not, whether it relies on other third-party libraries)
• Scalability
• Browser compatibility support

So, is there a simple way to make a dialog box? Of course, we can use the HTML5 dialog element.

HTML5(dialog)

 <dialog open> <h2>Hello world.</h2></dialog>

It's very simple. We can use the above code to make a dialog box that pops up with the content 'Hello world. '.

It is also easy to control the display/hiding of the dialog box. Add the open attribute to display it, and remove it to hide it. Of course, we can also control the display and hiding of the dialog through the DOM interface (show(), close())

For the mask layer under the dialog box, we can use the ::backgrop pseudo-element, and to activate it, we need to use the showModal() DOM API. The characteristic of ::backgrop is that its position is under the dialog, in any z -index above.

Using showModal() can not only display the mask layer, but also the dialog container, so when using ::backdrop, you can use showModal() instead of the show() API; if you press the ESC key on the keyboard, the pop-up layer will be closed. Of course, you One can use the close() DOM API.

We can set the ::backdrop layer to be a semi-transparent layer, the code is as follows:

 dialog::backdrop { background-color: rgba(0, 0, 0, 0.75);}

In addition to our common pop-up layers with prompt information, there is also a pop-up layer with a form that is more commonly used.

Can we use the HTML5 dialog element combined with the form element to make these pop-up layers?

Answer:Yes

How can we closely combine the form element and the dialog element?

Answer: We only need to add the method=dialog attribute to the dialog element, so that the value of the attribute value of the button element can be passed to the dialog element.

 <dialog> <form method=dialog> <p>Confirm or Cancel</p> <button type=submit value=yes>Confirm</button> <button type=submit value=no>Cancel</button> </form ></dialog><script> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>

demo

Although this is a relatively easy-to-use HTML5, there are still compatibility issues. Chrome and Opera support it better. It is an experimental feature in Firefox, but it is not supported by IE, Edge, and Safari. It is not supported by ios and is also supported by Android. is not good enough and is only supported by Android 6 and later. For details, please refer to caniuse

So, can older versions of browsers support HTML5 dialog? First of all, what we think about is whether there is a polyfill that supports dialog, just like babel-polyfill that supports the new features of es6. There is indeed such an open source project a11y-dialog, which provides different versions of vue and react respectively.

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.