Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
dialog {
position: fixed;
top: 50%;
left: 50%;
right: auto;
padding: 30px;
transform: perspective(500px) translate(-50%, -50%);
background: linear-gradient(to bottom, #FFF, #F4F4F4) #FFF;
border: none;
border-radius: 3px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
text-align: center;
transform-origin: 50% 50%;
animation: dialog 300ms cubic-bezier(.3,0,.1,1.4) forwards 1;
will-change: transform, opacity;
}
@keyframes dialog {
from {
transform: perspective(500px) translate(-50%, -25%) rotateX(45deg) scale(0.1);
opacity: 0;
}
}
dialog::backdrop {
opacity: 0;
will-change: opacity;
cursor: no-drop;
/** option 1: "grey" */
/*
background: rgba(0,0,0,0.3);
*/
/** option 2: "checkerboard" */
/*
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><rect x="0" y="0" width="1" height="1" fill="rgba(255,255,255,0.2)" /><rect x="1" y="1" width="1" height="1" fill="rgba(255,255,255,0.2)" /></svg>') rgba(0,0,0,0.3);
background-size: 2px 2px;
*/
/** option 3: "zoom" */
background: radial-gradient(circle at center, rgba(50,50,50,0.5), rgba(0,0,0,0.5));
animation: backdrop 500ms ease forwards 1;
}
@keyframes backdrop {
from { opacity: 0; }
to { opacity: 1; }
}
<link type="stylesheet" href="beautiful-html5-dialog.css">
<button onClick="dialog.showModal()">Open Dialog</button>
<dialog id="dialog">
<p>This is the dialog content.</p>
<button onClick="dialog.close()">Close</button>
</dialog>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.