Sam Sam - 14 days ago 8
CSS Question

Hiding CSS overlay

I'm working on an app that seems to be using CSS overlays. I have a basic understanding of CSS but not an expert.

In the style.css I see two classes:

.modal-wrapper {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 15000;
opacity: 1;
visibility: visible;
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out; }

.modal-wrapper.hide {
opacity: 0;
visibility: hidden; }


I'm using this in a React app and I need help with closing the overlay.

I simply render a component and set its isShown property to true and I'm able to open up the overlay.

However, I'm not sure about how to close it. Even if I set the isShown value to false in my redux store, the overlay still sits there.

I'd appreciate some help with closing the overlay. Thanks.

Answer

hope it helps!

.modal-wrapper.hide {
    visibility: visible;
    opacity: 0;
    width: 0;
    height: 0;
}