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

Question

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

Solution 1

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.

Solution 2

You can change the CSS of overlay by styles props of Modal

<Modal animationDuration={1000} styles={{ modal: {}, overlay: { background: "#ccc" } }} closeIconSize={16} open={modalOpen} onClose={this.onCloseModal} center > 
    Your Code Here...
</Modal>

Please see the full documentation of react-responsive-modal here

Solution 3

You need to target and overwrite the overlay class, e.g.

<Modal style={{ overlay: { background: 'black' } }} />

Another way of doing it is shown in the docs, e.g.

<Modal classNames={{ overlay: { background: 'black' } }} />

Comments

[Alex]

Thanks for the comment. But it doesnt work, there is no single change with this attempt. I have no clue why not, it seems for me as i cant change any propertie with css or inline.

[Alex]

Thanks for the comment. But it doesnt work, there is no single change with this attempts. I have no clue why not, it seems for me as i cant change any property with css or inline.

[AndrewL64]

@Alex The approach shown above is recommended in the official docs of react-responsive-modal so I'm not sure why its not working. Let me try to create a demo fiddle with the above code.

[Alex]

Yes i have no idea. I also read the official docs before posting this here. May it because i render the model within the mainComponent only if the div-button is pressed and the open-method in the modalComponent is never used?

[AndrewL64]

@Alex Ok I've figured it out. 1. You need to specify which element you want to add the custom background color to. Here, we want to target overlay so we need to specify that in the bg object. 2. We re trying to override the background css property, not the backgroundColor property so change that accordingly in your bg object. Check this codepen for a practical example of the above: codesandbox.io/s/6llqk6x973

[AndrewL64]

@Alex I have updated the answer with the correct one and also added some comments on why other variants don't work. Cheers!!

[Alex]

Thank you so much, that works for me! :) Just some other question, is there any possibility to NOT cover any header, which should be visible in any view of my app? I mean, when i open the modal/popup its fine to color anything in the background but except the navigation header. Is this possible in any way to exclude that header from the background coloring?

[AndrewL64]

@Alex You will have to open another question for that man else the question will be flagged for being 'too broad'. Do mark this as the correct answer and upvote it if it helped you solve your issue man :) Cheers!!

[Erhan Yaşar]

hello @Alex, I think it's because of missing braces and I edited the question to let you know.