alert blocked by bootstrap modal

[connectdotz]

Hi,

when invoking confirmAlert from Bootstrap Modal, which has z-index set at 1050, the react-confirm-alert-overlay will be blocked because it has z-index 99...

While you can bump up the z-index but I think this kind of dependency could be problematic and be easily broken by other 3rd party libraries... so wondering Is it possible to take a custom className for the overlay, which can be used to not only change z-index, but also apply different background color, for example... what do you think?

[michaeljarizala]

The suggestion is great. Is there any update on this enhancement feature?

[vklee88]

I'm not sure how useful this is but just in case this'll help someone else. When you take a look at the css within the code you can override css properties by adding div.<element_class_name> like so below.

div.react-confirm-alert-overlay {
    z-index: 9999;
}

Obviously it's still better if there was a less hacky solution

[arunpugahz]

It would be helpful if we could pass custom css as props to overwrite the existing css properties

[arunpugahz]

Although We can overwrite the existing CSS for the 'react-confirm-alert-overlay' component. If you are using Material-UI for styles, you can create a custom component and add the style like below.

confirmAlert({
        customUI: ({ onClose }) => {
          return (
            <div className={classes.alertContainer}>
........

your style declaration
alertContainer: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    boxShadow:
      '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    '&.react-confirm-alert-overlay': { zIndex: 99999 },
  }

[fxbayuanggara]

I have tried this using the Material-UI drawer, the component still shows behind the drawer.