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

AndrewL64 · Accepted Answer · 2021-05-06T14:25:24.890

13

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.

edited May 06 '21 at 14:25

answered Jan 07 '19 at 00:49

AndrewL64

15,794
8
47
79

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 Jan 07 '19 at 17:46
@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. – AndrewL64 Jan 07 '19 at 17:48
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? – Alex Jan 07 '19 at 17:54
@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: https://codesandbox.io/s/6llqk6x973 – AndrewL64 Jan 07 '19 at 18:47
@Alex I have updated the answer with the correct one and also added some comments on why other variants don't work. Cheers!! – AndrewL64 Jan 07 '19 at 19:01
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? – Alex Jan 07 '19 at 20:03
1

@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!! – AndrewL64 Jan 07 '19 at 20:53

score 3 · Answer 2 · answered Apr 09 '19 at 07:35

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

score 1 · Answer 3 · edited Mar 13 '20 at 14:36

1

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' } }} />

edited Mar 13 '20 at 14:36

Erhan Yaşar

847
1
9
25

answered Jan 07 '19 at 01:12

Colin Ricardo

16,488
11
47
80

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. – Alex Jan 07 '19 at 17:47
hello @Alex, I think it's because of missing braces and I edited the question to let you know. – Erhan Yaşar Mar 13 '20 at 14:50

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

3 Answers3