Skip to content

React-responsive-modal: Change background-color when modal is open

I use react-responsive-modal to open some modals within my react app. When i open the modal, there is an overlay effect that darkens the background behind the modal. Is there any way to darken the background for 100% or set any color for the background so i cant see the stuff which was there before the modal was opened until i close the modal again?

I created a new component for the modal ModalComponent within my MainComponent, which gets rendered when i click a button:

ModalComponent:

render() {
 return (
  <div className="childDiv">
    <Modal
      open={open}
      onClose={this.onCloseModal}
      center
      classNames={{
        transitionEnter: styles.transitionEnter,
        transitionEnterActive: styles.transitionEnterActive,
        transitionExit: styles.transitionExitActive,
        transitionExitActive: styles.transitionExitActive
      }}
      animationDuration={1000}
    >
   ...

MainComponent:

<div>
    <div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
      <p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
      <p className="price">max. {this.props.price} €</p>
      {this.state.open && (
        <BookingModalNew
          open={this.state.open}
          triggerCloseModal={this.closeModal.bind(this)}
          destination={this.props.destination}
          arrival={this.props.arrival}
          price={this.props.price}
        />
      )}
//Whole Stuff should not be visible while Modal is opened

Answer

Just assign an object with your styles for the overlay to a variable say, bg inside your render and then just use the styles prop to reference that object in your Modal like this:

render() {

 const bg = {
   overlay: {
     background: "#FFFF00"
   }
 };

 return (
  <div className="childDiv">
    <Modal open={open} onClose={this.onCloseModal} center styles={bg} }}>
        <p>Your Modal Content</p>
    </Modal>
  </div>
 )

}


But wait. Why create an extra object when we can just write the styles directly instead like this:

<Modal open={open} onClose={this.onCloseModal} center styles={background: "#FFFF00"}>
    <p>Your Modal Content</p>
</Modal>

The above approach won’t work even though it looks like it’s doing the same thing as my code and that is because you can’t directly specify styles inline on react-responsive-modal. You need to place the styles in an object first and then reference the styles prop to that object.


You can however create the object within the styles prop itself by doing this:

<Modal open={open} onClose={this.onCloseModal} center styles={{ overlay: { background: "#FFFF00" } }}>
    <p>Your Modal Content</p>
</Modal>

But it is recommended that you define objects outside and then reference it inside the styles prop as shown above.