In HTML5, there are a lot of new semantic tags. Footer, header, etc., the main character today is the dialog tag 😂

As the name suggests, is used to define the dialog box. Currently only Chrome and Safari support this TAB, so you don’t use it much, but it does work well with 🤞

Don’t worry, there’s an official polyfill.

Method of use

1. Basic usage

<dialog open> I am a dialog box </dialog>Copy the code

You can use the open property to control whether the dialog displays as follows:

Take a look at the default style for browser rendering:

Is pretty ugly, and the default is not full-screen center, transparent mask 😭

2. Use the JS API

Of course, you can also use JS to control the display and hiding of elements.

There are three commonly used methods:

The name of the instructions
show According todialogElement (as with the open property control)
showModal According todialogElement, and full-screen center, with a black transparent mask
close hiddendialogThe element

Simple usage:

<dialog> <p> I am a dialog box </p> <button onclick="hideDialog()"<button onclick= <button onclick="showDialog()"</button> <script>let dialog = document.querySelector("dialog"); // Displays a dialog boxfunction showDialog() { dialog.show(); } // Hide the dialog boxfunction hideDialog() {
    dialog.close();
  }
</script>
Copy the code

The effect is as follows:

Change dialog.show() to dialog.showmodal () to see what happens:

As described above, “full screen centered with black transparent mask” looks good 😂

The default Settings are still the same, just add a :: Backdrop

3. Modify the background color

If you want to change the background color, you can override the style directly:

dialog::backdrop {
  background: linear-gradient(45deg, black, transparent);
}
Copy the code

The effect is as follows:

Multiple dialogs

If multiple dialogs appear at the same time, they are superimposed based on the order in which they were called.

Suppose the layout looks like this (omit the JS code, because it’s pretty much the same) :

<dialog> <p> <button onclick="hideDialog1()"<button onclick= <button onclick="showDialog2()"</button> <dialog> <dialog> <p> I am the second dialog </p> <p> <button onclick="hideDialog2()"<button onclick= <button onclick="showDialog1()"> Display the first dialog </button>Copy the code

The effect is as follows:

Since it is superimposed, the background color must be superimposed (multiple dialog elements are present at the same time), of course 😂

The style of the dialog itself can also be modified to override it:

dialog {
  border: none;
  border-radius: 8px;
}
Copy the code

The effect is as follows:

Click the mask to close the dialog box

There are no parameters/properties that can be set to “click on the mask to close the dialog”, but it’s quite common, isn’t it?

Add a click event to the Dialog when the target is a mask, and then hide itself.

dialog.onclick = function(event) {
  console.log(event.target);
};
Copy the code

But things didn’t go so well:

Wherever you click, the target element is dialog😭, but there is a very clever way.

I changed the structure to the following:

<dialog>
  <div class="content"> // This is the content... </div> </dialog>Copy the code

Then transfer the default padding of dialog to.content!

dialog { padding: 0; .content { padding: 1rem; }}Copy the code

So click words, you can distinguish out 😉

Then judge, and you’re done:

dialog.onclick = function(event) {
  if (event.target.tagName.toLowerCase() == "dialog") this.close();
};
Copy the code

The effect is as follows:

Configure clickable mask Off

If closeByMask exists on the tag, you can click to close it:

<dialog closeByMask></dialog>

<dialog closeByMask></dialog>
Copy the code

Then add the following script:

document.querySelectorAll("dialog[closeByMask]").forEach(dialog => {
  dialog.onclick = function(event) {
    if(event.target.tagName.toLowerCase() == "dialog") this.close(); }});Copy the code

And then no matter how you nested can 🤣

If both dialogs have the closeByMask attribute:

If the second dialog only has the closeByMask attribute:

How to add transition animation

1. The use of animation

Dialog {animation: slideDown 0.2s ease; } @keyframes slideDown { from { transform: translateY(-100px); } to { transform: translateY(0); }}Copy the code

The effect is as follows:

Cons: No animation when closed 😭

2. The use of the transition

Dialog elements without the open attribute are set to display: None by default.

It is well known that transition does not support display transitions 😭

Therefore, we need to replace opacity: 0 with display: None to support the transition 😉

Dialog {transition: opacity 0.4s ease; opacity: 1; } dialog:not([open]) { display: block; opacity: 0; }Copy the code

The effect is as follows:

However, opacity is only set as opacity. In fact, the dialog element still exists. If the click event is bound to the dialog, it will also be executed, even if you cannot see it 😒

Like this:

Do not panic, we do not have the visibility property hahaha 💕, so the CSS code changed to the following:

dialog:not([open]) {
  display: block;
  opacity: 0;
  visibility: hidden;
}
Copy the code

Perfect solution 😁, and show with hide have transition effect. There will be an article on how to hide elements above.

Notice that the mask background has no transition effect, only the Dialog element itself.

I tried to write the following code:

dialog::backdrop {
  opacity: 1;
  transition: opacity 10s ease;
}

dialog:not([open])::backdrop {
  opacity: 0;
}
Copy the code

Found no effect, welcome to add or correct the comments 😘

Browser compatibility table

polyfill

dialog-polyfill

The last

If you think this article is good, please don’t forget to like and follow 😊