How to fade in a HTML5 dialog?

Question

How can I fade in an HTML5 dialog? And by dialog I mean HTML5 <dialog> tag (http://demo.agektmr.com/dialog/).

I tried the following (http://jsfiddle.net/v6tbW/) but for some reason the transition does not work.

HTML

<dialog id="myDialog">
    Test
</dialog>

<script>
     document.getElementById('myDialog').show(); // note that this is a method of <dialog>, this is not a jQuery method.
</script>

CSS

dialog {
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;

    visibility:hidden;
    opacity:0;
    transition:visibility 10s linear 10s,opacity 10s linear;
}

dialog[open] {   
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

.backdrop {
    position: fixed;
    background: rgba(0,0,0,0.1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

Minimal HTML 5 version

The example below has the benefit of no dependencies or external script needed. The <dialog> tag is handy when opened with showModal as it displays a backdrop over the top of DOM declared around it even with display: relative | absolute on its direct parent.

dialog {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
dialog[open] {
  opacity: 1;
  pointer-events: inherit;
}
dialog::backdrop {
  background-color: rgba(0,0,255, 0.2);
}

<button onclick="dialog.showModal()">show dialog</button>
<dialog id="dialog">
  <p>hi i'm a dialog!</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

Using a <form> with method=dialog accomplishes closing the modal without having to handle the close event.

These two references are most enlightening:

https://css-tricks.com/some-hands-on-with-the-html-dialog-element/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Closing points

• As of 11-6-2020, Safari in general does not support this
• This makes React portals obsolete for modal purposes