A couple of things to consider, that we didn't cover in the video.

1. CSS positioning can sometimes get tricky if you place a dialog deeply nested in the DOM. It's common to place modals at the end of the page, just before the closing body tag. If you're using Vue or React, research portals/teleports.

<Teleport to="body">
    <dialog>
      <slot />
    </dialog>
  </Teleport>

2. If you want a fancy hide animation (like sliding down), you may run into an issue where the "hide" animation runs immediately when the page loads. There's a couple ways to deal with this, but the most popular is to toggle a "disable-animations" class on your body tag. This class should disable any running animations.

.disable-animations {
	animation-duration: 0s;
    /* ... */
}

Alternatively, you can use @starting-style for your transitions. At the time of this writing, it only works in Google Chrome, but I'm sure more browser support is coming soon. Here's an example you can review:

https://codepen.io/jeffreylaracasts/pen/pomyVoy

Let's Have a Dialog