How to hide AG-Grid https://www.ag-grid.com/ once I click button to show some popup (modal). Every other element is "covered" by modal background. But AG Grid is on top of the modal. How can I hide the grid once modal is enabled ? At least how can modal be rendered on top of AG Grid? Application is developed with React.
.modalBackground {
width: 100vw;
height: 100vh;
background-color: rgba(200, 200, 200);
position: fixed;
display: flex;
justify-content: center;
align-items: center ;
}
Add a z-index property to your modalBackground class. The div with this class needs being a child of the body tag also.
.modalBackground {
width: 100vw;
height: 100vh;
background-color: rgba(200, 200, 200);
position: fixed;
display: flex;
justify-content: center;
align-items: center ;
z-index: 1;
}