Skip to content

Instantly share code, notes, and snippets.

@calebporzio
Last active February 28, 2022 18:15
Show Gist options
  • Save calebporzio/e58d4782839decfaf24087499b8578ae to your computer and use it in GitHub Desktop.
Save calebporzio/e58d4782839decfaf24087499b8578ae 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;
}
@Kazane
Copy link

Kazane commented Apr 30, 2019

Really awesome feature, but only question about how to close this kind of dialog window :(

@apisandipas
Copy link

@Kazane

var detailsEl = document.getElementsByTagName('details')[0];
  detailsEl.removeAttribute("open");

@kdambekalns
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment