Detailed explanation of the dialog element in HTML5 (code example)

This article brings you a detailed explanation (code example) of the dialog element in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Dialog box (also known as modal box, floating layer) is an important part for user interaction in web projects. Our most common ones are alert(), confirm() in js, However, this dialog box is not beautiful, and the style cannot be customized, so during the development process, you usually build a wheel according to your own needs or use a third party.

Composition of dialog boxes

Common pop-up box forms:

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

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

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

But 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

above The dialog box contains the content container, and there is also a mask layer (mask) under 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 can give A more obvious visual difference effect for users, and it also prevents users from other unnecessary page main operations after triggering the dialog box, thereby producing a better user experience.

Problems

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 (api Simple or not, does it depend 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 HTML5’s dialog element.

HTML5(dialog)

a144f22e2a850e633abba38330027819
    c1a436a314ed609750bd7c7d319db4da Hello world.2e9b454fa8428549ca2e64dfac4625cd
e949bf554aab987df819ed6441bc3609

It’s very simple. We can use the above code to make a dialog box with the content of ‘Hello world.’ pop-up.

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 use the DOM interface to control the visibility (show(), close()) of dialog

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

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

We can set ::backdrop This layer is 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 layer of prompt information, there is also a Class comparison uses a popup layer with a form.

Pop-up layer with form

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 attribute method="dialog" to the dialog element, so that the value of the attribute value of the button element can be passed Give the dialog element.

a38fd2622755924ad24c0fc5f0b4d412
  9a80b60279a1fc3cc29b87aae5a888b1
    e388a4556c0f65e1904146cc1a846bee确定 or 取消94b3e26ee717c64999d7867364b1b4a3
    1d15c23a371098d0a91cc26c5f5df8f6确定65281c5ac262bf6d81768915a4a77ac0
    73f05620b8d0f192df010cbb16b76d67取消65281c5ac262bf6d81768915a4a77ac0
  f5a47148e367a6035fd7a2faa965022e
e949bf554aab987df819ed6441bc3609

3f1c4e4b6b16bbbd69b2ee476dc4f83a
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
2cacc6d41bbb37262a98f745aa00fbf0

demo

var dialog = document.querySelector('dialog')
dialog.showModal()
dialog.addEventListener('close', function(event) {
  alert(dialog.returnValue)
})

<dialog>
  <form method="dialog">
    <p>确定 or 取消</p>
    <button type="submit" value="yes">确定</button>
    <button type="submit" value="no">取消</button>
  </form></dialog>

dialog::backdrop {  background: rgba(0, 0, 0, 0.6)
}

Browser compatibility

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 IE, Edge, and Safari do not support it well. iOS does not support it. Android does not support it well enough. It is only supported by Android 6 and later. For details, please refer to caniuse

So, can old 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 detailed content of Detailed explanation of the dialog element in HTML5 (code example). For more information, please follow other related articles on the PHP Chinese website!