How to change the opacity of modal background?

Highlighted
Occasional Contributor

Hello! 

 

So I'm looking to adjust the background opacity of the modals you see by clicking the 4 blue buttons on this page.

 

I've tried adjusting the opacity with the suggestions here, here, and here but am not seeing any of my changes applied no matter what I try.

 

The process seems pretty straightforward yet I'm having trouble identify why these changes aren't taking place. 

 

Any help here to adjust the opacity of the modal background would be greatly appreciated. 

 

Thanks in advance! 

 

 

 

 

Reply
0 Upvotes
3 Replies 3
Regular Contributor

Hello,

you just have to change .modal-content color to rgba(); I attached snapshot below

Capture.JPG

Reply
0 Upvotes
Occasional Contributor

Sorry if there was any confusion here. What I am looking to do is change the opacity of the the black background that the modal window sits on top of. So I'd want to see more of the page in the background and not necessary change the opacity of the modal window itself.  

Reply
0 Upvotes
Community Manager
Community Manager

Hey @jzimmermann,

 

I took a look at your page and this will be the code you need to target:

div#myModal {
    background: rgba(240, 248, 255, 0.18);
}

RGBA stands for "Red, green, blue, alpha", in web, the alpha will be your opacity level. So on this code, changing your '.18' to a higher number will make it more opaque, and a lower number will make it more transparent.

 

You mentioned using the style of 'opacity', while this could do it, opacity behaves a little differently. Opacity will change the entire container (contents and all), so everything in that container will be come transparent/luscent. 

 

Hope this helps you out!

-- Ty

Reply
0 Upvotes