Hiding CSS overlay - css

Question

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 1

hope it helps!
.modal-wrapper.hide {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}

Answer 2

I suggest setting your z-index to -1 or something lower, as the overlay will sit-on-top of other elements.
.modal-wrapper.hide {
opacity: 0;
visibility: hidden;
z-index: -1;
}

Answer 3

Please try this code
HTML
<div class="modal-wrapper"></div>
<div class="modal-wrapper hide"></div>
CSS
.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: 1;
visibility: visible;
width: 20px;
cursor:pointer;
background-color: transparent;
margin: 10px 20px;
height: 20px;
}
.modal-wrapper.hide:after, .modal-wrapper.hide:before {
content: "";
width: 2px;
height: 20px;
background: #fff;
display: inline-block;
transform: translatex(-1px) rotate(45deg);
}
.modal-wrapper.hide:before{
transform: translatex(0) rotate(-45deg);
}
Jsfiddle