neaumusic neaumusic - 1 month ago 14
CSS Question

CSS -- transparent "glass" modal, everything else darkened


THE ANSWER:
background-attachment







----- JSBin Example ----





The answer is to use
background-attachment


screenshot





ORIGINAL QUESTION


I'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside of the modal panel is slightly masked.

I have successfully used
border: 10000px rgba(0,0,0,0.3)
with
border-radius: 10010px
but this is a hack, and I can't outline the modal with a
box-shadow


Is there any standard way for doing this? Bonus points if you can think of a way to apply a transparency filter gradient to an image.

Answer

screenshot

---- JSBin Example ---- GitHub Gist ----


The answer is to use background-attachment

background-attachment: fixed;
background-size: cover;
background-position: center center;
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(http://imgur.com/oVaQJ8F.png);

.modal-backdrop {
    background: url(myurl.png) center center / cover no-repeat fixed
}

.modal-panel {
    background: url(myurl.png) center center / cover no-repeat fixed
}

The best value would be fixed so that your backdrop and your modal can share the same viewport X and Y (0, 0) by default

You then scale with background-size percentages or cover

When using background: shorthand, make sure to use a / to separate background-position from background-scale amounts


I ran into a bug on an older device, so I used local then manually computed leftX and topY to line up backdrop and modal-panel background-position at (0, 0) on my viewport.

I then scaled both images with the same percentage, to cover the screen

I also used a gradient, credit -- How to darken a background Image