React-modal: CSS class .ReactModal__Body--open isn't added to body

[ghost]

The CSS class .ReactModal__Body--open isn't added to body, so I can't add overflow: hidden to the body in order to prevent scrolling behind the modal.

I'm using version 0.5.0.

[shinework]

+1

In my case

renderPortal: function(props) {
    if (props.isOpen) {
      elementClass(document.body).add('ReactModal__Body--open');
    } else {
      elementClass(document.body).remove('ReactModal__Body--open');
    }

...

props.isOpen switch to false just after it was set to true, so the class is added then removed.

[roth1002]

I think it was the second modal issue.

[rfarine]

+1 Having this same issue when there is more than one modal on the page.

[claydiffrient]

See my comments here: https://github.com/reactjs/react-modal/pull/101#issuecomment-208891959

Two modals at once doesn't really make sense to me. I could be missing something though.

[goldensunliu]

https://github.com/reactjs/react-modal/issues/173 related issue.

[john-osullivan]

@claydiffrient My usecase for multiple modals on one page is a number of similar components which each have a detail view which should be opened within a modal. Think of something similar to how the Pinterest interface gives you a detail modal for each item. Is there an implementation detail that makes supporting this extra difficult?

@goldensunliu pointed out a good work-around in #173 , simply choosing to only render the Modal component when it should be open and otherwise having it be null. This works, but is less elegant than actually using the isOpen property everywhere. Any ideas?

[claydiffrient]

@john-osullivan I see the issue now. It's not multiple modals opened at once, but rather multiple modal components rendered (with only one open at a time). I think I see the issue with that now.

What I've done in the past in situations like this is to render one modal component and let state (or props) control what is displayed in it. I'll look into a way we could possibly make this more efficient by sharing a modal portal for each rendered modal.

[heltonvalentini]

Until this bug is fixed the easiest workaround I found is to use onAfterOpen callback.

afterOpenModal() {
    document.body.classList.add('ReactModal__Body--open')
  }

<Modal onAfterOpen={this.afterOpenModal}></Modal>

[FuzzySockets]

+1

[damonbauer]

I solved this by adding the following CSS:

.ReactModalPortal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

[charleschenster]

I got around this issue by setting and unsetting another class on body. This has the property that it'll work for multiple opened modals as long as you're using different class names for each modal.

afterOpenModal() {
  document.body.classList.add('ReactModal-open')
}
onRequestCancel() {
  document.body.classList.remove('ReactModal-open')
}
<Modal onAfterOpen={this.afterOpenModal} onRequestCancel={this.onRequestCancel}></Modal>

.ReactModal-open {
  overflow: hidden;
}

[diasbruno]

1.6.5+ should have a fix for this issue. Please, reopen this issue if necessary.

[boonier]

@diasbruno Does this mean that > 1.6.5 will have the fix, or that currently 1.6.5 and above has the fix? I updated the package and doesn't seem to have any effect. Perhaps there is a specific implementation required?

[diasbruno]

@boonier 1.6.5 and above.

[boonier]

Thanks @diasbruno. I can't however seem to get it to work how I need it to, so I'm doing a workaround for now. The closing modal needs to consider if there are other modals already in the DOM, and only remove the class if it is the last.

[diasbruno]

@boonier oh, see #326. it will fix the case where many modals were opened.

[lejahmie]

This is still an issue when having multiple modals. Using version 3.1.11.
I guess issue is that when having more than one modal is that the opened modal adds class but closed modals removes body class.