How to hide AG-Grid once I click button to show some popup (modal)-CodePudding

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 ;
  }

CodePudding user response：

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;
}