diff --git a/src/Modal.js b/src/Modal.js index 91e5ca566..b521c2508 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -101,6 +101,7 @@ class Modal extends React.Component { this._element = null; this._originalBodyPadding = null; + this._originalBodyOverflow = null; this.getFocusableChildren = this.getFocusableChildren.bind(this); this.handleBackdropClick = this.handleBackdropClick.bind(this); this.handleBackdropMouseDown = this.handleBackdropMouseDown.bind(this); @@ -339,6 +340,7 @@ class Modal extends React.Component { } this._originalBodyPadding = getOriginalBodyPadding(); + this._originalBodyOverflow = window.getComputedStyle(document.body).overflow; conditionallyUpdateScrollbar(); if (Modal.openCount === 0) { @@ -346,6 +348,7 @@ class Modal extends React.Component { document.body.className, mapToCssModules('modal-open', this.props.cssModule) ); + document.body.style.overflow = 'hidden'; } this.modalIndex = Modal.openCount; @@ -375,6 +378,7 @@ class Modal extends React.Component { // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened` const modalOpenClassNameRegex = new RegExp(`(^| )${modalOpenClassName}( |$)`); document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim(); + document.body.style.overflow = this._originalBodyOverflow; } this.manageFocusAfterClose(); Modal.openCount = Math.max(0, Modal.openCount - 1);