Skip to content

Instantly share code, notes, and snippets.

@superfine
Forked from calebporzio/pure_html_css_modal.css
Created April 30, 2019 15:16
Show Gist options
  • Save superfine/048d44bb94931466d51e73c25bfb042f to your computer and use it in GitHub Desktop.
Save superfine/048d44bb94931466d51e73c25bfb042f to your computer and use it in GitHub Desktop.
The CSS for the pure HTML/CSS modal I tweeted about.
details summary {
cursor: pointer;
outline: none !important;
display: inline-block;
padding: 8px 12px;
padding-top: 10px;
border-radius: 4px;
overflow: hidden;
background: #F09825;
color: white;
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
letter-spacing: 0.025em;
text-transform: uppercase;
}
details[open] > summary::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
cursor: default;
content: " ";
z-index: 99;
background: rgba(27,31,35,0.5);
}
details > div {
left: 50%;
margin: 10vh auto;
max-height: 80vh;
max-width: 90vw;
position: fixed;
top: 0;
transform: translateX(-50%);
width: 448px;
z-index: 999;
animation-name: fadein;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
background-color: #fff;
border: 1px solid #d1d5da;
border-radius: 3px;
font-size: 2em;
font-weight: bold;
font-family: Arial;
padding: 1em;
box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
border-top: 4px solid #F09825;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
details summary::-webkit-details-marker {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment