<dialog>
<h2>Hello world!</h2>
<p>Click on the button.</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
<button onclick="document.querySelector('dialog').showModal()">Open Dialog</button>
@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,800;1,700&display=swap');
/* IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
/* other styles */
border: 6px solid;
border-radius: 20px;
box-shadow: 20px 20px 0 blue;
}
/* 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Etc */
body {
padding: 1.5rem;
}
body,
button {
font-family: Anybody, system-ui;
font-size: 1.5rem;
}
button {
padding: 1rem;
background: linear-gradient(-45deg in oklch, #f07030, blue);
color: white;
border: 6px solid #ff7b22;
border-radius: 1rem;
}
h2, p {
margin: 0;
}
p {
margin-bottom: 2rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.