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

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.

[baptadn]

+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: #101 (comment)

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

[goldensunliu]

#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>

[nebulou5]

+1

[damonbauer]

I solved this by adding the following CSS:

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