HTML5.2 New tag — Dialog

The original address

preface

After many new tags were added to HTML5, HTML5.2 introduced several modern tags, including the <dialog> tag. Let’s learn about this tag.

Take a chestnut

Here’s a simple example:

This is the original dialog style, without adding any additional styles. This is consistent in Chrome and Firefox, and their default styles look like this, basically the same

Chrome: Firefox:

Too ugly? ! If you add thin face (remove the default style), beauty (CSS), and special effects (JS) to it, it can be very sexy 😄.

Two attributes

open

This property means that the dialog box is visible; without it, the dialog box is hidden until you use JavaScript to display it, essentially adding the open property to it.

returnValue

To get the argument passed in when close, see below.

Three methods

show()

showModal()

Both methods have the same thing in common: they open the popover, adding an open attribute to the dialog element. Difference:

The only difference is that show() shows the dialog according to its position in the DOM stream, without masks, whereas showModal() shows a mask, and automatically does keymonitoring, i.e. when you hit ESC, the popover closes

In most cases, we use the convenient showModal() method instead of the show() method.

close()

The popover closes, that is, the open property is removed, and can carry a parameter as additional data, the value passed in can be retrieved via dialog.returnValue.

Two events

close

Triggered when Modal is turned off

cancel

Triggered when ESC is pressed to close the modal box

In each event’s event object, event.target, you can also see the argument passed in by the close() method, event.target. The returnValue.

A pseudo-element

::backdrop

Is a Dialog pseudo-element that sets the style of the popover mask

Dialog ::backdrop backdrop (0, 0, 0, gba); }Copy the code

The browser also has a default style for Backdrop. Chrome:

Here’s another chestnut

Part of the code

methods: { onShow () { this.dialog.showModal(); } }, mounted () { this.dialog = this.$refs.dialog2; let closeBtn = this.dialog.querySelector('.js-close'); let confirmBtn = this.dialog.querySelector('.js-confirm'); let cancelBtn = this.dialog.querySelector('.js-cancel'); / / press esc to close the popup window. This will also trigger the close events dialog. AddEventListener (' cancel ', e = > {/ / don't write this sentence will be shut down, The main purpose here is to carry data and demonstrate listening for cancel event this.dialog.close(' press ESC to close '); }); / / close this dialog. The addEventListener (' close 'e = > {let returnValue = this. Dialog. ReturnValue. this.dialog.returnValue = ''; returnValue ! == '' && this.$notify({ title: 'returnValue', message: returnValue }); }); / / click on the mask off, event registration on the dialog. This dialog. The addEventListener (' click '(event) = > {the if (event. Target = = = this. Dialog) {/ / closed, And carry data this.dialog.close(' hit mask close '); }}); / / point x close closeBtn. AddEventListener (' click ', e = > {this. Dialog. The close (' clicked shut down); }); / / points to determine confirmBtn. AddEventListener (' click ', e = > {this. Dialog. The close (' click on ok "); }); / / points to cancel cancelBtn. AddEventListener (' click ', e = > {this. Dialog. The close (' click on the cancel '); }); }Copy the code
/* change dialog style */ dialog {position: fixed; margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 300px; max-width: 80%; border: none; box-shadow: 1px 1px 1px rgba(0, 0, 0, .3); } dialog[open] {animation: slide-up 0.4s ease-out; } /* Change the mask */ dialog::backdrop backdrop: rgba(0, 0, 0, 0.5); } @keyframes slide-up { 0% { opacity: 0; transform: translate(-50%, -40%); } 100% { opacity: 1; transform: translate(-50%, -50%); }}Copy the code

polyfill

What? ! Browser not supported? No response on your phone? !!!!!

It doesn’t matter. There is a dialog-polyfill that can still do this with a little extra code. Just import the js and add a line after the popover object:

dialogPolyfill.registerDialog(this.dialog);
Copy the code

Then import its CSS (very simple). If you are interested, please try the Demo again. If you are not supported, please try the Demo again.

One last chestnut

The resources

  • <dialog>: The Dialog element
  • Codepen. IO/keithjgrant…
  • Native Popups and Modals With the HTML5 “dialog” Element
  • An exploration of the new HTML5. X feature “Dialog” tag