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)

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

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.

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

<script>
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
</script>

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!