Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use dialog elements in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Dialog box (also known as modal box, floating layer) is an important part of the web project for user interaction, we are the most common js alert (), confirm (), but this dialog box is not beautiful, can not customize the style, so in the development process, generally according to their own needs to build wheels or the use of third parties.

Composition of the dialog box

Common forms of pop-up boxes:

Position: upper left corner, upper right corner, lower left corner, lower right corner, middle vertically

Size: fixed width and height, fixed width and indefinite height, indefinite width and indefinite height

The dialog form in development is a random combination of location and size.

However, there is a situation (vertical centering with variable width and height) is not easy to achieve (you can use translate or flex of display:table or css3). For more information, please refer to the horizontal vertical centering layout.

The above dialog box contains the content of the container, there is a dialog box below the mask layer (mask), the mask layer is the user triggered pop-up box, the formation of a dialog box and the page body of the split layer, its existence can give the user a more obvious visual difference, but also to prevent users from triggering the dialog box after other unnecessary page body operations, resulting in more user experience.

There are problems

Although there are many dialog wheels for us to choose from, we are faced with a variety of problems.

Which dialog box to choose (a headache for people with choice syndrome)

Availability (whether api is simple or not, whether it depends on other third-party libraries)

Expandability

Compatibility support for browsers

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

HTML5 (dialog)

Hello world.

Quite simply, we can use the above code to make a pop-up that reads' Hello world.''. The dialog box of.

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

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

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

We can set:: backdrop this layer is a translucent layer, the code is as follows:

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

In addition to our common pop-up layer of prompts, there is another category that is more likely to use pop-up layers with forms.

Pop-up layer with form

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

A: yes

What can we do to closely combine the form element with the dialog element?

Answer: we just need to add the attribute method= "dialog" to the dialog element, so that we can pass the value of the attribute value of the button element to the dialog element.

Make sure or cancels

Confirm to cancel var dialog = document.querySelector ('dialog') dialog.showModal () dialog.addEventListener (' close', function (event) {console.log (dialog.returnValue)})

Demo

Browser compatibility

Although this is a relatively easy to use HTML5, but there are still compatibility problems, chrome and opera support is better, Firefox is an experimental feature, but IE,Edge, safari support is not good, ios does not support, Android support is not good enough, only Android6 supports later. For more information, please refer to caniuse

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

This is the end of the content of "how to use dialog elements in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.