Skip to content

Instantly share code, notes, and snippets.

@jasonbellamy

jasonbellamy/modal-with-outline-overlay.css

Created February 26, 2015 22:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonbellamy/5f050359f6045c5f1e6b to your computer and use it in GitHub Desktop.
Save jasonbellamy/5f050359f6045c5f1e6b to your computer and use it in GitHub Desktop.
Download ZIP
Modal overlay created using CSS outline property.
Raw
modal-with-outline-overlay.css
.modal {
background: black;
color: rgb(255, 255, 255);
height: 200px;
left: 50%;
position: relative;
text-align: center;
top: 50%;
transform: translate(-50%, 50%);
width: 200px;
/* create background "overlay" */
outline: 9999px solid rgba(0,0,0,0.5);
z-index: 1;
}
@rupl
Copy link

rupl commented Jun 6, 2018

love it!!! independently came up with today and I dig it for a few reasons:

  • The overlay is always present when the modal is visible
  • The outline allows clicks to pass through, which can be combined with a document listener to close the modal when the target wasn't inside the modal itself
  • scroll area isn't affected by size of outline

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