Minimalist, <dialog> example, keeping it simple.
Adam Argyle / argyleink from Google, extended Dialog Tutorial (2022)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
dialog {
display: grid;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
transition: all 2s;
}
dialog:not([open]) {
animation: slideout 2s forwards;
pointer-events: none;
opacity: 0;
}
dialog[open] {
animation: slidein 2s forwards;
}
@keyframes slidein {
0% { margin-top: -10vh; }
100% { margin-top: 10vh; }
}
@keyframes slideout {
0% { margin-top: 10vh; }
100% { margin-top: -10vh; }
}
</style>
</head>
<body>
<dialog>
Hello World
<button onclick="document.querySelectorAll('dialog')[0].close()">Close</button>
</dialog>
<button onclick="document.querySelectorAll('dialog')[0].showModal()">Open Dialog</button>
</body>
</html>