CMS Development

jzimmermann
Participant

How to change the opacity of modal background?

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! 

 

 

 

 

0 Upvotes
3 Replies 3
gotohubspot
Member

How to change the opacity of modal background?

Hello,

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

Capture.JPG

0 Upvotes
jzimmermann
Participant

How to change the opacity of modal background?

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.  

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

How to change the opacity of modal background?

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

0 Upvotes