In HTML 5, many semantic tags have been added. For example, footer, header and so on, today's protagonist is dialog tag (vii)

As the name implies, it is used to define dialog boxes. At present, only Chrome and Safari support this tag, so it's not used much, but it's really good.

Don't worry. There's an official polyfill.

Usage method

1. Basic usage

< dialog open > I am a dialog box </dialog >

The open attribute controls whether dialog is displayed or not. The effect is as follows:

Look at the default style of browser rendering:

It's ugly, and by default it's not completely screen-centered and transparent.

2. Using JS API

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

There are three commonly used methods:

Simple usage:

<dialog>
  <p>I am a dialog box</p>
  <button onclick="hideDialog()">Hidden dialog box</button>
</dialog>

<button onclick="showDialog()">display a dialog box</button>

<script>
  let dialog = document.querySelector("dialog");
  
  // display a dialog box
  function showDialog() {
    dialog.show();
  }
  
  // Hidden dialog box
  function hideDialog() {
    dialog.close();
  }
</script>

The results are as follows:

Change dialog.show() to dialog. show Modal () to see the effect:

As mentioned above, "Full screen centered, with a black transparent mask", looks good (vii)

The default style hasn't changed, except for one more: backdrop pseudo-element (transparent mask):

3. Modify the background color

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

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

The results are as follows:

Multiple dialog boxes

If multiple dialog boxes appear at the same time, they will be superimposed according to the sequence of calls.

Suppose the layout is as follows (JS code is omitted because it is the same):

<dialog>
  <p>I'm the first dialog box.</p>
  <button onclick="hideDialog1()">Hidden dialog box</button>
  <button onclick="showDialog2()">Display the second dialog box</button>
</dialog>

<dialog>
  <p>I'm the second dialog box.</p>
  <p>I'm the second dialog box.</p>
  <button onclick="hideDialog2()">Hidden dialog box</button>
</dialog>

<button onclick="showDialog1()">Display the first dialog box</button>

The results are as follows:

Since it is superposition, the background color must be superimposed (there are multiple dialog elements at the same time), which is inevitable (_)

The style of dialog itself can also be modified to cover directly:

dialog {
  border: none;
  border-radius: 8px;
}

The results are as follows:

Click on the mask to close the dialog box

There are no parameters / attributes that can be set to "click the mask to close the dialog box", but this requirement is very common, isn't it?

Think about it for a while, then realize one by yourself. In fact, add a click event to dialog. When the target of the click is masking, then hide yourself.

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

But the fact is not so smooth:

Wherever you click, the target element is dialog, but there's a very smart way to do it.

I changed the structure into the following:

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

Then move dialog's default padding to. content!

dialog {
  padding: 0;
  
  .content {
    padding: 1rem;
  }
}

In this way, you can distinguish it by clicking on it.

Then judge that it is successful:

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

The results are as follows:

Configuration of Clickable Mask Close

We agree on an attribute closeByMask, which can be clicked off if it exists on the label:

<dialog closeByMask></dialog>

<dialog closeByMask></dialog>

Then add the following script:

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

Then no matter how nested you are, you can do it.

Suppose both dialog s have closeByMask attributes:

If the closeByMask attribute exists only in the second dialog:

How to add transitional animation

1. Using animation

dialog {
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100px);
  }

  to {
    transform: translateY(0);
  }
}

The results are as follows:

Disadvantage: No animation when closed (1)

2. Use transition

The dialog element without the open attribute is set to display: none by default.

It is well known that transition does not support display ing transition

So we have to change display: none to opacity: 0 to support the transition.

dialog {
   transition: opacity 0.4s ease;
   opacity: 1;
}

dialog:not([open]) {
  display: block;
  opacity: 0;
}

The results are as follows:

But opacity just sets transparency. In fact, the dialog element still exists. If a click event is bound to the dialog, it will be executed, even if you can't see it.

For example:

Don't panic, don't we still have the visibility attribute? Haha, so the CSS code should be changed as follows:

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

Perfect problem solving, and show and hide have transitional effects. A detailed article will be devoted to the method of hiding elements mentioned above.

Did you find that the masking background has no transitional effect, just the dialog element itself?

I try to write the following code:

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

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

It has not been found to have any effect. You are welcome to comment on the supplement or correction of the __________.

Browser Compatibility Table

Rest assured, there is an official polyfill:

dialog-polyfill

Last

If you think this article is good, please don't forget to pay attention to it.

Communication

Wechat Public's "Front End Cosmological Intelligence Agency" will update the latest and practical front-end skills/technical articles from time to time, as well as the occasional interesting stories on the Internet.

Pay attention to the public number, reply to "1" and join the Wechat learning group, study together, communicate with each other and fish together.